jQuery Plugin for Countdown Timer on HTML Page

SyoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization.

countdown timer html javascript, countdown timer jquery, dynamic countdown timer, countdown timer in javascript, javascript countdown timer hours minutes seconds

Countdown Timer Days, Hours, Minutes Seconds For Vue.js

How to make use of it:

Install & Download:

# Yarn
$ yarn add jquery-syotimer

# NPM
$ npm install jquery-syotimer --save

1. Load the jQuery Syotimer plugin’s script after the jQuery library as follows:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.syotimer.min.js"></script>

2. Create a DIV component for the timer.

<div id="simple_timer"></div>

3. The JavaScript to generate a countdown timer contained in the DIV component you simply created.

$('#simple_timer').syotimer({
  year: 2020,
  month: 11,
  day: 9,
  hour: 20,
  minute: 30
});

4. Initialize the plugin as a periodic timer.

$('#simple_timer').syotimer({
  year: 2020,
  month: 11,
  day: 9,
  hour: 20,
  minute: 30,

  periodic: true,
  periodInterval: 3,
  periodUnit: 'm'
});

5. Add customized header and footer to the timer.

$('#periodic_timer_days').syotimer({
  year: 2020,
  month: 11,
  day: 9,
  hour: 20,
  minute: 30,
  headTitle: '<h3>Timer with header and footer. Countdown is over</h3>',
  footTitle: '<i style="color: brown;">Footer of timer.</i>',
});

6. Execute a callback after the timer is finished.

$('#simple_timer').syotimer({
  year: 2020,
  month: 11,
  day: 9,
  hour: 20,
  minute: 30,

  afterDeadline: function(){
    // ...
  }
});

7. Set the timezone relying on your present location.

$('#simple_timer').syotimer({
  year: 2020,
  month: 11,
  day: 9,
  hour: 20,
  minute: 30,
  timeZone: 1
});

8. i18n support.

var lang = {
    eng: {
        second: ['second', 'seconds'],
        minute: ['minute', 'minutes'],
        hour: ['hour', 'hours'],
        day: ['day', 'days']
    }
};

$('#simple_timer').syotimer({
  year: 2020,
  month: 11,
  day: 9,
  hour: 20,
  minute: 30,
  lang: 'eng'
});

9. Full plugin options with default values.

// time to countdown from
year: 2014,
month: 10,
day: 31,
hour: 0,
minute: 0,
second: 0,

// time zone
timeZone: 'local',
ignoreTransferTime: false,

// for periodic timer
periodic: false, /
periodInterval: 7, 
periodUnit: 'd', 

// show days
dayVisible: true,

// show hours, minutes and seconds with leading zeros
doubleNumbers: true = 02:05:04)

// none or opacity
effectType: 'none', 

// language
lang: 'eng',

// header
headTitle: '', 

// footer
footTitle: '', 

// callback
afterDeadline: function(timerBlock){
    timerBlock.bodyBlock.html('<p style="font-size: 1.2em;">The countdown is finished!</p>');
}

Simple Countdown/Periodic Timer Plugin, jQuery SyoTimer Plugin/Github