Sensible Timer And Counter is a jQuery plugin that can be utilized so as to add timers and clocks to the online web page. Plugin is very configurable and expandable by means of customized skins (visible element), modes (clock/timer logic) and languages (translate labels).
All styling is finished utilizing CSS (and Canvas for Round pores and skin), and all included kinds are pure CSS with no photographs used. Controls are responsive, makes use of media queries to vary counter sizes, and it may break into a number of traces on smaller screens.
Plugin is examined with present Android browsers, iPhone and iPad Safari and Chrome, all fashionable desktop browsers. It requires JavaScript and jQuery assist to work.
Countless styling possibilites
Clock and Counter Modes, Customized Layouts
Plugin can work as clock or as counter. If used as clock, you possibly can present present date/time, or you can begin from any date. Clock mode can present time in 24 hours (default) format or in 12 hours format (with the AM/PM badge). Counter can rely all the way down to any date, countdown any variety of seconds or countup to any seconds restrict. Plugin can show totally different mixture of time and date components, dividers and labels.
Record of Modes Controls
- Structure: mix order for ‘years, ‘months’, ‘days’, ‘hours’, ‘minutes’, ‘seconds’.
- Dividers: a number of dividers out there to separate date / time components.
- Variety of Digits: customise variety of digits for every date / time factor.
Record of Counter Strategies
- Date: it have to be sooner or later set utilizing JavaScript Knowledge object. Plugin will rely to zero to achieve set date.
- Elapsed: it have to be up to now set utilizing JavaScript Knowledge object. Plugin counts how a lot time has elapsed since previous date.
- Seconds: rely to zero from specified variety of seconds.
- Goal: rely from zero to specified variety of seconds.
Numbers primarily based rely up and down module
Plugin also can use quantity primarily based format to rely up or down with nice flexibility. It permits for customized variety of digits, decimal locations, decimal and thousand separators, customized step (even randomized from set vary). You may specify one character earlier than and after the counter (like foreign money signal).
All included skins (besides Round) work with the numbers’ module. Some skins can have a bit of various settings.
7 Fundamental Skins: Base, Easy, Animated, Round, Customized, Plain and Inline
Plugin has 7 in-built skins to show clocks/counters. Easy and Animated skins have 14 kinds every (some the identical). Animated pores and skin makes use of animations (SlideIn, SlideOut, Fade, FadeIn, FadeOut) to vary digits. Inline pores and skin can be utilized on SPAN tags for including counters inline with textual content with minimal styling modifications.
Record of Out there Skins
- Easy: easy approach of displaying digits, with 14 predefined kinds.
- Animated: animation to vary digits, with 14 predefined kinds and 5 animations.
- Inline: for components contained in the textual content, with 6 predefined kinds.
- Round: makes use of Canvas to render round dials, limitless colour customizations.
- Customized: prolonged from Animated Pores and skin, free management over colours and styling.
- Plain: easier pores and skin with free management over colours and a few management for stylings.
- Base: bonus pores and skin with no styling included, with similar conduct as Easy pores and skin.
Flip Pores and skin
Flip pores and skin is absolutely customizable, and it lets you use customized colours for digits, background and label, use shadows, specify dimensions, change font household and dimension.
Pores and skin works with each timers and numbers modules in Sensible Timer And Counter plugin. It could possibly flip a number of digits in the identical time.
4 LED Skins: Segments, Bars, Matrix 3×5 and 5×7
That is traditional 7 Section LED show, and it helps totally different sizes (weight from 2 to twenty pixels) with customized width and peak for segments, customized colours, transitions and skew impact by any diploma. Border radius settings are usually not supported for this pores and skin.
These skins creates matrix with 3×5 or 5×7 dots for every quantity. You may customise dimension (any dot weight worth), customized colours, border radius for dots, transitions and skew impact by any diploma.
8 Flat Pores and skin: Panels, Diamonds, Tiles, Squares, Bars, Rectangles, Circles, Rounds
Extra skins primarily based on primary shapes. These skins are for the Counter module solely, they will’t be used with Numbers module.
Record of Out there Skins
- Panels
- Diamonds
- Tiles
- Bars
- Sqaures
- Rectangles
- Cicles
- Rounds
Customized Pores and skin permits free customization
To make use of this pores and skin, Animated pores and skin additionally must be loaded. This pores and skin has no predefined skins. However, you possibly can set customized colours, background, shadows, results from plugin settings. This permits you straightforward customization of colours and kinds. Additionally, you possibly can change colours independently for each counter factor.
Plain Pores and skin permits straightforward customization
That is quite simple pores and skin that permits customization of colours, font and different components.
Round Pores and skin makes use of Canvas to indicate round dials
Primarily based on third get together jQuery Knob library, permits full customization of dimension and colours (even utilizing transparency) for quantity dials.
Straightforward customization and integration with detailed documentation
Plugin has big selection of settings for skins, modes, language. It’s straightforward to customise and use with any jQuery primarily based undertaking. Documentation incorporates detailed rationalization of all settings, checklist of values, checklist of kinds and extra. Plugin package deal has loads of demos.
Many occasions and strategies out there for additional management
Many occasions out there to connect your individual code to regulate issues outdoors the timers (progress bar, occasions on the web page) with strategies to get present state of the counts or clocks, cease or begin timers and extra. Instance within the package deal reveals tips on how to management progress bar for countdown.
Different plugin options
- Help for translation utilizing language objects to vary factor labels.
- Connect your individual code on callback occasions to deal with begin, cease, end…
- Many settings to regulate counters show: dividers, spacing, labels…
- Consists of strategies to begin, cease, reset or modify counter object components.
- Consists of 7 PDF documentation recordsdata with details about the plugin.
- Consists of 26 demo recordsdata with nearly 100 demos.
System Necessities
- jQuery 1.7 or newer
- Helps jQuery 2.x and three.x
- Trendy browsers launched after 2015
Documentation
Plugin incorporates PDF person and builders guides contained in the plugin package deal, within the ‘docs’ listing. Take a look at these paperwork to get info on plugin choices, utilization and extra. To begin with the plugin, open the ‘index.html’ file within the browser to get the details about plugin utilization, and checklist of demos to get you began with the plugin utilization. You may as well discover every instance within the ‘demo’ listing.
Model 4 Discover
Model 4.0 of the plugin incorporates all of the skins that beforehand belonged to the addons. Due to that, some file names have been modified, so once you change to new model be certain that to verify which recordsdata you want and if a few of them have modified names.
Changelog
Model 4.3 / 2023.08.30.
- Added: Extra demo for the counters with timer and occasions
- Up to date: Examined with jQuery 3.7.1
- Up to date: Many enhancements to the plugin core
- Up to date: Improved core code readability
- Up to date: Cleanup of the plugin CSS
- Up to date: Improved minifaction of the CSS and JS
- Up to date: Eliminated outdated CSS properties for legacy browsers
- Up to date: Eliminated assist for very outdated legacy browsers
- Mounted: Numerous styling points with background colours
- Mounted: Numerous minor points with JavaScript code
- Mounted: Lacking demo background photographs
Model 4.2 / 2023.01.25.
- Up to date: Examined with jQuery 3.6.3
- Up to date: Numerous enhancements to the plugin core
Model 4.1 / 2020.06.12.
- Up to date: Examined with jQuery 3.5.1
- Up to date: refactoring some jQuery occasion handlers
- Up to date: numerous enhancements to the plugin core
- Up to date: eliminated a number of situations of unused variables
- Mounted: few situations of wrongly used animation pace worth
