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.

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

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

Read More – Simple Attractive Circular 360 Degree Countdown Timer | countdown360

Options

OptionDescriptionType of ValueDefault ValueAvailable Values
datedate, which should count down timerinteger/Date0 
layoutsets an order of layout of units of the timer: days (d) of hours (‘h’), minutes (‘m’), seconds (‘s’).string‘dhms’ 
doubleNumberstrue – show hours, minutes, and seconds with leading zeros (2 hours 5 minutes 4 seconds = 02:05:04)booleantrue 
effectTypeThe effect of changing the value of secondsstring‘none’‘none’, ‘opacity’
langlocalization of countdown signatures (days, hours, minutes, seconds)string‘eng’see Localization
periodictrue – 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 periodIntervalbooleanfalse 
periodIntervalthe period of the timer in periodUnit (if periodic is set to true)integer7>0
periodUnitthe unit of measurement period timerstring‘d’‘d’, ‘h’, ‘m’, ‘s’

Check Here – Simple CountDown Clock jQuery Plugin with Custom Timezone

Default languages

By default the supported plugin languages:

LanguageValue of lang option
English‘eng’
Russian‘rus’
Spanish‘spa’
Portuguese‘por’
Hebrew‘heb’

Requirements

jQuery SyoTimer Plugin has been tested with jQuery 1.7+ on all major browsers:

  • Firefox 2+ (Win, Mac, Linux);
  • IE8+ (Win);
  • Chrome 6+ (Win, Mac, Linux, Android, iPhone);
  • Safari 3.2+ (Win, Mac, iPhone);
  • Opera 8+ (Win, Mac, Linux, Android, iPhone).

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

Read More – 

JavaScript Library For Creating Countdowns Timer | Countdown.js
Simple Multi Countdown Timer Plugin Using Javascript/JQuery


See Demo And Download

Official Website(mrfratello): Click Here

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

Share