Minimal Stopwatch Timer Plugin For jQuery - Free Download Minimal Stopwatch & Timer Plugin For jQuery

Free Download Minimal Stopwatch & Timer Plugin For jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal Stopwatch & Timer Plugin For jQuery, hope it will help you in programming stack.

Minimal Stopwatch Timer Plugin For jQuery - Free Download Minimal Stopwatch & Timer Plugin For jQuery
File Size: 54.3 KB
Views Total: 33113
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A clean and simple jQuery stopwatch/timer plugin which allows you to count up from zero or a certain time with start, pause and resume controls.

Basic Usage:

1. Create a container for the stopwatch/timer.

view source
1 <div id="t" class="badge">00:00</div>

2. Create a control button which allows to start, pause and resume the timer in one button.

view source
1 <button id="btn">Start</button>

3. Load the jQuery library and jQuery timer plugin at the end of your page.

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to/cdn/timer.jquery.min.js"></script>

4. The JavaScript to enable the timer.

view source
01 (function(){
02  
03   $("#btn").click(function(){
04     switch($(this).html().toLowerCase())
05     {
06  
07       case "start":
08       $("#t").timer({
09         action: 'start',
10         seconds: 0
11       });
12       $(this).html("Pause");
13       $("input[name='s']").attr("disabled", "disabled");
14       $("#t").addClass("badge-important");
15       break;
16          
17       case "resume":
18       $("#t").timer('resume');
19       $(this).html("Pause")
20       $("#t").addClass("badge-important");
21       break;
22          
23       case "pause":
24       //you can specify action via object
25       $("#t").timer({action: 'pause'});
26       $(this).html("Resume")
27       $("#t").removeClass("badge-important");
28       break;
29  
30     }
31   });
32  
33 })();

5. Style the timer and control button via CSS.

view source
1 .badge-important {
2 ...
3 }
4 ...

6. Available settings and callbacks

view source
01 // Default seconds value to start timer from
02 seconds: 0,        
03  
04 // Allow making changes to the time by clicking on it
05 editable: false,     
06  
07 // Duration to run callback after
08 duration: null,  
09  
10 // Turn off the display of the timer
11 hidden: false   
12  
13 // Default callback to run after elapsed duration
14 callback: function() {   
15   console.log('Time up!');
16 },
17  
18 // This will repeat callback every n times duration is elapsed
19 repeat: false,       
20  
21 // If true, this will render the timer as a countdown (must have duration)
22 countdown: false,    
23  
24 // This sets the format in which the time will be printed
25 format: null,      
26  
27 // How often should timer display up<a href="https://www.jqueryscript.net/time-clock/">date</a>
28 updateFrequency: 500    <br>

7. API methods.

view source
01 //pause an existing timer
02 $("#div-id").timer('pause');
03  
04 //resume a paused timer
05 $("#div-id").timer('resume');
06  
07 //remove an existing timer
08 $("#div-id").timer('remove');  //leaves the display intact
09  
10 //get elapsed time in seconds
11 $("#div-id").data('seconds');

8. Get the current state of your timer.

view source
1 $('#div-id').data('state');

Changelog:

v0.9.1 (2019-12-23)

  • Updated timer to support continuous run

v0.9.0 (2018-11-27)

  • Adding new parameter

v0.8.0 (2018-09-27)

  • Added data state ‘removed

v0.7.0 (2017-04-17)

  • Move to ES 5

v0.6.5 (2016-03-23)

  • Incremental improvements

v0.6.3 (2016-07-05)

  • Fixed redundant early return

v0.6.2 (2016-06-17)

  • (fix) Object.assign issue on mobile
  • Removed all Object.assign instances

v0.5.3 (2016-06-10)

  • Add support for days

v0.5.2 (2016-06-08)

  • (fix) countdown pause issue

v0.4.14 (2016-05-15)

  • Fixed Timer problem Reset

v0.4.10 (2016-01-30)

  • Fixed reset timer & added test for reset.

v0.4.9 (2016-01-16)

  • Fixed issue where empty args did not translate to start

v0.4.4 (2015-12-27)

  • Added AMD support for requirejs

v0.4.3 (2015-08-04)

  • FIXED: Pausing, editing the time, and resuming could update the duration to reflect new time

v0.4.2 (2015-06-17)

  • Improvement added: Customize timer display update frequency

v0.4.1 (2015-04-25)

  • Added functionality to get the current state of the timer.
  • Fixed a callback issue when seconds parameter is also passed along with duration parameter

2014-12-07

  • Added functionality to edit timer
  • Revamped timer.start and added testing ground

2014-11-01

  • Switched to nullifying data object from element instead of $.removeData on clearing timer

2014-07-25

  • Added repeat callback notification functionality

2014-07-23

  • Added function to convert pretty time to seconds

2014-02-19

  • Added a check to see if timer is running. Tweaked CSS for demo. 

2014-02-06

  • added feature to display time in a verbose fashion
  • added timer value in seconds to a data attr on the element itself

 

This awesome jQuery plugin is developed by walmik. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: