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.

Features

Periodic counting with the specified period
Effects of change of indications of the countdown
The correct declension of nouns next to numeral numerals
An opportunity to add the language of countdown signatures which isn’t included in the standard version of the plugin
Callback after the end of the countdown timer with the possibility of changing the structure of the timer
Custom formatting and styling timer

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 a 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>');
}

Options

Option	Description	Type of Value	Default Value	Available Values
`date`	date, which should count down timer	integer/Date	0
`layout`	sets an order of layout of units of the timer: days (d) of hours (‘h’), minutes (‘m’), seconds (‘s’).	string	‘dhms’
`doubleNumbers`	`true` – show hours, minutes, and seconds with leading zeros (2 hours 5 minutes 4 seconds = 02:05:04)	boolean	true
`effectType`	The effect of changing the value of seconds	string	‘none’	‘none’, ‘opacity’
`lang`	localization of countdown signatures (days, hours, minutes, seconds)	string	‘eng’	see Localization
`periodic`	`true` – the timer is periodic. If the date until which counts the timer is reached, the next value date which will count down the timer is incremented by the value `periodInterval`	boolean	false
`periodInterval`	the period of the timer in `periodUnit` (if `periodic` is set to `true`)	integer	7	>0
`periodUnit`	the unit of measurement period timer	string	‘d’	‘d’, ‘h’, ‘m’, ‘s’