Simple Countdown / Periodic Timer Plugin With jQuery - SyoTimer

The SyoTimer jQuery plugin lets you create digital-style countdown / periodic timers on the webpage, with support for callbacks and custom timezone / localization.

Install & Download:

# Yarn
$ yarn add jquery-syotimer

# NPM
$ npm install jquery-syotimer --save

How to use it:

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

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

2. Create a DIV element for the timer.

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

3. The JavaScript to generate a countdown timer inside the DIV element you just created.

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

3. Initialize the plugin as a periodic timer.

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

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

4. Add custom header and footer to the timer.

$('#periodic_timer_days').syotimer({
  year: 2020,
  month: 5,
  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>',
});

5. Execute a callback after the timer is finished.

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

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

6. Set the timezone depending on your current location.

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

7. i18n support.

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

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

8. Full plugin options with default values.

// time to countdown from
year: 2014,
month: 7,
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, // показывать часы, минуты и секунды с ведущими нолями ( 2часа 5минут 4секунды = 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>');
}

Changelog:

2020-05-07

• v2.1.2: update dependencies

2019-10-17

• v2.1.1: publish on npm; possibility import as module; default css styles;

2019-09-19

• v2.0.1

2017-06-24

• v2.0

---

This awesome jQuery plugin is developed by mrfratello. For more Advanced Usages, please check the demo page or visit the official website.