Smart Timer And Counter - JQuery Mega Countdown Plugin

Smart Timer And Counter – jQuery Mega Countdown Plugin

Smart Timer And Counter is a jQuery plugin that can be utilized so as to add timers and clocks to the net web page. Plugin is extremely configurable and expandable by customized skins (visible element), modes (clock/timer logic) and languages (translate labels).

All styling is completed utilizing CSS (and Canvas for Circular pores and skin), and all included types are pure CSS with no photos used. Controls are responsive, makes use of media queries to vary counter sizes, and it may well break into a number of strains 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 help to work.

Endless styling possibilites

Skins: Circles And Rounds

Clock and Counter Modes, Custom 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 depend all the way down to any date, countdown any variety of seconds or countup to any seconds restrict. Plugin can show completely different mixture of time and date parts, dividers and labels.

List of Modes Controls

Layout: mix order for ‘years, ‘months’, ‘days’, ‘hours’, ‘minutes’, ‘seconds’.
Dividers: a number of dividers obtainable to separate date / time parts.
Number of Digits: customise variety of digits for every date / time aspect.

List of Counter Methods

Date: it have to be sooner or later set utilizing JavaScript Data object. Plugin will depend to zero to achieve set date.
Elapsed: it have to be prior to now set utilizing JavaScript Data object. Plugin counts how a lot time has elapsed since previous date.
Seconds: depend to zero from specified variety of seconds.
Target: depend from zero to specified variety of seconds.

Numbers primarily based depend up and down module

Plugin may also use quantity primarily based format to depend 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 can specify one character earlier than and after the counter (like foreign money signal).

All included skins (besides Circular) work with the numbers’ module. Some skins can have a bit of various settings.

7 Basic Skins: Base, Simple, Animated, Circular, Custom, Plain and Inline

Plugin has 7 inbuilt skins to show clocks/counters. Simple and Animated skins have 14 types 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.

List of Available Skins

Simple: easy approach of displaying digits, with 14 predefined types.
Animated: animation to vary digits, with 14 predefined types and 5 animations.
Inline: for parts contained in the textual content, with 6 predefined types.
Circular: makes use of Canvas to render round dials, limitless colour customizations.
Custom: prolonged from Animated Skin, free management over colours and styling.
Plain: less complicated 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 habits as Simple pores and skin.

Flip Skin

Timer Flip Animation

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.

Numbers Flip Animation

Skin works with each timers and numbers modules in Smart Timer And Counter plugin. It can flip a number of digits in the identical time.

4 LED Skins: Segments, Bars, Matrix 3×5 and 5×7

Skin: 7 Segments

This is basic 7 Segment LED show, and it helps completely 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 aren’t supported for this pores and skin.

Skin: Dot Matrix 5x7

These skins creates matrix with 3×5 or 5×7 dots for every quantity. You can customise dimension (any dot weight worth), customized colours, border radius for dots, transitions and skew impact by any diploma.

8 Flat Skin: Panels, Diamonds, Tiles, Squares, Bars, Rectangles, Circles, Rounds

Additional skins primarily based on primary shapes. These skins are for the Counter module solely, they will’t be used with Numbers module.

List of Available Skins

Panels
Diamonds
Tiles
Bars
Sqaures
Rectangles
Cicles
Rounds

Custom Skin permits free customization

Custom Skin allows free customization

To use this pores and skin, Animated pores and skin additionally must be loaded. This pores and skin has no predefined skins. But, you possibly can set customized colours, background, shadows, results from plugin settings. This permits you straightforward customization of colours and types. Also, you possibly can change colours independently for each counter aspect.

Plain Skin permits straightforward customization

Plain Skin allows easy customization

This could be very easy pores and skin that enables customization of colours, font and different parts.

Circular Skin makes use of Canvas to indicate round dials

Circualar Skin uses Canvas to show circular dials

Based on third occasion jQuery Knob library, permits full customization of dimension and colours (even utilizing transparency) for quantity dials.

Easy customization and integration with detailed documentation

Plugin has wide selection of settings for skins, modes, language. It is straightforward to customise and use with any jQuery primarily based mission. Documentation incorporates detailed rationalization of all settings, checklist of values, checklist of types and extra. Plugin bundle has loads of demos.

Many occasions and strategies obtainable for further management

Many events and methods available for extra control

Many occasions obtainable to connect your individual code to regulate issues exterior 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. Example within the bundle exhibits the best way to management progress bar for countdown.

Other plugin options

Support for translation utilizing language objects to vary aspect labels.
Attach your individual code on callback occasions to deal with begin, cease, end…
Many settings to regulate counters show: dividers, spacing, labels…
Includes strategies to begin, cease, reset or modify counter object parts.
Includes 7 PDF documentation recordsdata with details about the plugin.
Includes 26 demo recordsdata with nearly 100 demos.

System Requirements

jQuery 1.7 or newer
Supports jQuery 2.x and three.x
Modern browsers launched after 2015

Documentation

Plugin incorporates PDF person and builders guides contained in the plugin bundle, within the ‘docs’ listing. Check out these paperwork to get data 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 also discover every instance within the ‘demo’ listing.

Version 4 Notice

Version 4.0 of the plugin incorporates all of the skins that beforehand belonged to the addons. Because of that, some file names have been modified, so once you swap to new model make sure that to verify which recordsdata you want and if a few of them have modified names.