yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization.
Features
- Periodic count with the specified period
- Effects of changing countdown indicators
- Correct declension of nouns next to numbers
- Opportunity to add countdown signatures language which is not included in the standard version of the plugin
- Reply after the end of the countdown counter with the possibility of changing the structure of the counter
- Custom format and design timer
Must Read: Angular Timer Component With Countup & Countdown | Cd-Timer
How to make use of it:
1. In the browser. You need to download the latest version. And include the JavaScript file that you can find in the build folder:
<script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.syotimer.min.js"></script>
Using npm: $ npm install jquery-syotimer Using yarn: $ yarn add jquery-syotimer
2. Syotimer plugin can be integrated with plain JavaScript or with different loading modules.
<script type="text/javascript">
jQuery(function ($) {
$(".selector_to_countdown").syotimer();
});
</script>const $ = require("jquery");
require("jquery-syotimer");
$(".selector_to_countdown").syotimer();import $ from "jquery";
import "jquery-syotimer";
$(".selector_to_countdown").syotimer();3. Classes are named BEM methodology:
<div class="syotimer">
<div class="syotimer__head"></div>
<div class="syotimer__body">
<div class="syotimer__item syotimer-cell syotimer-cell_type_day">
<div class="syotimer-cell__value">1</div>
<div class="syotimer-cell__unit">day</div>
</div>
<div class="syotimer__item syotimer-cell syotimer-cell_type_hour">
<div class="syotimer-cell__value">1</div>
<div class="syotimer-cell__unit">hour</div>
</div>
<div class="syotimer__item syotimer-cell syotimer-cell_type_minute">
<div class="syotimer-cell__value">1</div>
<div class="syotimer-cell__unit">minute</div>
</div>
<div class="syotimer__item syotimer-cell syotimer-cell_type_second">
<div class="syotimer-cell__value">1</div>
<div class="syotimer-cell__unit">second</div>
</div>
</div>
<div class="syotimer__footer"></div>
</div>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’ |
Localization
Default languages
By default the supported plugin languages:
| Language | Value of lang option |
|---|---|
| English | ‘eng’ |
| Russian | ‘rus’ |
| Spanish | ‘spa’ |
| Portuguese | ‘por’ |
| Hebrew | ‘heb’ |
Requirements
jQuery SyoTimer plugin 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).
See Also –
Simple CountDown Clock jQuery Plugin with Custom Timezone
JavaScript Library For Creating Countdowns Timer | Countdown.js
jQuery CountdownGampang inspired and implemented ClassyCountdown
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.
