Press "Enter" to skip to content

jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

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


See Demo And Download

Official Website(mrfratello): Click Here

This superior jQuery/javascript plugin is developed by mrfratello. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.