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