From 25b3f8b801bbd0d2957508f0c1f7c0080e4b341a Mon Sep 17 00:00:00 2001 From: Jason Chavannes Date: Mon, 16 Mar 2015 00:30:21 -0700 Subject: [PATCH 1/3] Adding stopwatch and countdown classes for more precise timing while still keeping old timer class for reverse compatibility --- demo.html | 35 +++++--- jquery.timer.js | 211 +++++++++++++++++++++++++++++++++++++++++++++++- res/demo.js | 88 +++----------------- res/style.css | 4 +- 4 files changed, 245 insertions(+), 93 deletions(-) diff --git a/demo.html b/demo.html index c168f13..f4b1e4b 100755 --- a/demo.html +++ b/demo.html @@ -15,22 +15,33 @@

jQuery Timer Demo

Project home: http://jchavannes.com/jquery-timer

View Source

-

Example 1 - Stopwatch (counts ups)

- 00:00:00 +

Example 1 - Stopwatch

- - + 00:00:00
+ +

-
+ 
+var Example1 = $.stopWatch(function () {
+    var output = this.getFormattedTime() + " - <i>(" + this.getTime() + " milliseconds)</i>";
+    $('#stopwatch').html(output);
+});

-

Example 2 - Countdown Timer

- 05:00:00 +

Example 2 - Countdown

- - - + 05:00:00
+ +
+ 
+var Example2 = $.countDown(function() {
+    $('#countdown').html(this.getFormattedTime());
+    if (this.isFinished()) {
+        alert('Example 2: Countdown complete!');
+    }
+}, 20);
+

Example 3 - Slideshow (preserves time remaining when paused)

@@ -51,9 +62,9 @@

Example 3 - Slideshow (preserves time remaining when paused)

-

-

+

+

diff --git a/jquery.timer.js b/jquery.timer.js index 5bcc9cd..2b63980 100644 --- a/jquery.timer.js +++ b/jquery.timer.js @@ -28,7 +28,14 @@ ;(function($) { - $.timer = Timer; + $.timer = Timer; + $.stopWatch = StopWatch; + $.countDown = CountDown; + + $.timerUtil = { + pad: pad, + formatTime: formatTime + }; /** * First parameter can either be a function or an object of parameters. @@ -274,4 +281,206 @@ }; + /** + * @param {function=} updateFunction + */ + function StopWatch(updateFunction) { + + if (typeof this == "function" || this.init) { + return new StopWatch(updateFunction); + } + + this.set(updateFunction); + + return this; + } + + /** + * @param {function=} updateFunction + */ + StopWatch.prototype.set = function(updateFunction) { + + if (typeof updateFunction != "function") { + return; + } + + this.init = true; + this.updateFunction = updateFunction; + this.startTime = new Date().getTime(); + this.pauseStart = 0; + this.setInterval(); + + }; + + StopWatch.prototype.timeUpdate = function() { + + if (this.startTime == 0) { + this.timePassed = 0; + } + else { + this.timePassed = new Date().getTime() - this.startTime; + } + + this.updateFunction.apply(this); + + }; + + /** + * @returns {int} + */ + StopWatch.prototype.getTime = function() { + return this.timePassed > 0 ? this.timePassed : 0; + }; + + /** + * @returns {string} + */ + StopWatch.prototype.getFormattedTime = function() { + return formatTime(this.getTime()); + }; + + StopWatch.prototype.stop = function() { + this.clearInterval(); + this.startTime = 0; + this.timeUpdate(); + }; + + StopWatch.prototype.pause = function() { + this.clearInterval(); + this.pauseStart = new Date().getTime(); + this.timeUpdate(); + }; + + StopWatch.prototype.toggle = function() { + if (this.pauseStart || this.startTime == 0) { + this.start(); + } + else { + this.pause(); + } + }; + + StopWatch.prototype.setInterval = function() { + + this.clearInterval(); + this.interval = setInterval(interval, 1000/30); + + var self = this; + function interval() { + self.timeUpdate(); + } + + }; + + StopWatch.prototype.clearInterval = function() { + clearInterval(this.interval); + }; + + StopWatch.prototype.start = function() { + + if (!this.startTime) { + this.startTime = new Date().getTime(); + } + else if (this.pauseStart) { + this.startTime += (new Date().getTime() - this.pauseStart); + this.pauseStart = 0; + } + else { + return; + } + + this.setInterval(); + + }; + + /** + * @param {function=} updateFunction + * @param {int=} countdown + */ + function CountDown(updateFunction, countdown) { + + if (typeof this == "function" || this.init) { + return new CountDown(updateFunction, countdown); + } + + this.set(updateFunction, countdown); + + return this; + } + + CountDown.prototype = new StopWatch(); + + /** + * @param {int} countdown + */ + CountDown.prototype.setCountdown = function(countdown) { + this.countdown = countdown * 1000; + }; + + /** + * @param {function=} updateFunction + * @param {int=} countdown + */ + CountDown.prototype.set = function(updateFunction, countdown) { + this.setCountdown(countdown); + StopWatch.prototype.set.apply(this, [updateFunction]); + }; + + /** + * @returns {int} + */ + CountDown.prototype.getTime = function() { + + var time = this.countdown - StopWatch.prototype.getTime.apply(this); + + if (time <= 0) { + time = 0; + this.finished = true; + this.startTime = 0; + this.clearInterval(); + } + else { + this.finished = false; + } + + return time; + + }; + + /** + * @returns {boolean} + */ + CountDown.prototype.isFinished = function() { + return this.finished; + }; + + CountDown.prototype.start = function() { + if (this.getTime() == 0) { + this.startTime = 0; + } + StopWatch.prototype.start.apply(this); + }; + + /** + * @param {int} number + * @param {int} length + * @returns {string} + */ + function pad(number, length) { + var str = '' + number; + while (str.length < length) {str = '0' + str;} + return str; + } + + /** + * @param {int} time (in milliseconds) + * @returns {string} + */ + function formatTime(time) { + var min = parseInt(time / 60000), + sec = parseInt(time / 1000) - (min * 60), + hundredths = pad(parseInt(time / 10 - (sec * 100) - (min * 6000)), 2); + return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths; + } + })(jQuery); diff --git a/res/demo.js b/res/demo.js index eb4a3c1..5c5b05d 100755 --- a/res/demo.js +++ b/res/demo.js @@ -1,82 +1,14 @@ -/** - * jQuery Timer doesn't natively act like a stopwatch, it only - * aids in building one. You need to keep track of the current - * time in a variable and increment it manually. Then on each - * incrementation, update the page. - * - * The increment time for jQuery Timer is in milliseconds. So an - * input time of 1000 would equal 1 time per second. In this - * example we use an increment time of 70 which is roughly 14 - * times per second. You can adjust your timer if you wish. - * - * The update function converts the current time to minutes, - * seconds and hundredths of a second. It then outputs that to - * the stopwatch element, $stopwatch, and then increments. Since - * the current time is stored in hundredths of a second so the - * increment time must be divided by ten. - */ -var Example1 = new (function() { - var $stopwatch, // Stopwatch element on the page - incrementTime = 70, // Timer speed in milliseconds - currentTime = 0, // Current time in hundredths of a second - updateTimer = function() { - $stopwatch.html(formatTime(currentTime)); - currentTime += incrementTime / 10; - }, - init = function() { - $stopwatch = $('#stopwatch'); - Example1.Timer = $.timer(updateTimer, incrementTime, true); - }; - this.resetStopwatch = function() { - currentTime = 0; - this.Timer.stop().once(); - }; - $(init); -}); - - -/** - * Example 2 is similar to example 1. The biggest difference - * besides counting up is the ability to reset the timer to a - * specific time. To do this, there is an input text field - * in a form. - */ -var Example2 = new (function() { - var $countdown, - $form, // Form used to change the countdown time - incrementTime = 70, - currentTime = 30000, - updateTimer = function() { - $countdown.html(formatTime(currentTime)); - if (currentTime == 0) { - Example2.Timer.stop(); - timerComplete(); - Example2.resetCountdown(); - return; - } - currentTime -= incrementTime / 10; - if (currentTime < 0) currentTime = 0; - }, - timerComplete = function() { - alert('Example 2: Countdown timer complete!'); - }, - init = function() { - $countdown = $('#countdown'); - Example2.Timer = $.timer(updateTimer, incrementTime, true); - $form = $('#example2form'); - $form.bind('submit', function() { - Example2.resetCountdown(); - return false; - }); - }; - this.resetCountdown = function() { - var newTime = parseInt($form.find('input[type=text]').val()) * 100; - if (newTime > 0) {currentTime = newTime;} - this.Timer.stop().once(); - }; - $(init); +var Example1 = $.stopWatch(function () { + var output = this.getFormattedTime() + " - (" + this.getTime() + " milliseconds)"; + $('#stopwatch').html(output); }); +var Example2 = $.countDown(function() { + $('#countdown').html(this.getFormattedTime()); + if (this.isFinished()) { + alert('Example 2: Countdown complete!'); + } +}, 20); /** * The purpose of this example is to demonstrate the original @@ -111,7 +43,7 @@ var Example3 = new (function() { if (this.Timer.isActive) { this.Timer.pause(); var remaining = this.Timer.remaining / 1000; - $timeRemaining.html(remaining + " seconds remaining."); + $timeRemaining.html(remaining + " seconds remaining.
"); } else { this.Timer.play(); diff --git a/res/style.css b/res/style.css index f58b070..8a83a94 100755 --- a/res/style.css +++ b/res/style.css @@ -35,7 +35,7 @@ p { pre { background-color: #eee; border: 1px solid #ccc; - width: 490px; + width: 600px; padding: 5px; } div { @@ -72,6 +72,6 @@ div { width: 250px; margin-bottom: 10px; } -#example2form, .example-three { +.example-three { margin-bottom: 40px; } \ No newline at end of file From 34b526b552c3d29db8b87eea6d86369e8424167e Mon Sep 17 00:00:00 2001 From: Jason Chavannes Date: Tue, 17 Mar 2015 00:40:17 -0700 Subject: [PATCH 2/3] Adding usage and renaming to lowercase --- demo.html | 95 +++++++++++++++++++++++++++++++------------------ jquery.timer.js | 50 +++++++++++++------------- res/demo.js | 14 ++++---- res/style.css | 10 +++--- 4 files changed, 99 insertions(+), 70 deletions(-) diff --git a/demo.html b/demo.html index f4b1e4b..34dd330 100755 --- a/demo.html +++ b/demo.html @@ -15,16 +15,39 @@

jQuery Timer Demo

Project home: http://jchavannes.com/jquery-timer

View Source

-

Example 1 - Stopwatch

+
+ +

Usage

+ +
+ +

Stopwatch

+ +

Create a new stopwatch

+

HTML

+ 
<div id='time'>%lt;/div>
+

Javascript

+ 
+var stopwatch = $.stopwatch(function(watch) {
+    $('#time').html(watch.getFormattedTime();
+});
+ +
+ +

Examples

+ +
+ +

Example 1 - Stopwatch

00:00:00

- 
-var Example1 = $.stopWatch(function () {
-    var output = this.getFormattedTime() + " - <i>(" + this.getTime() + " milliseconds)</i>";
-    $('#stopwatch').html(output);
+    
+var Example1 = $.stopwatch(function () {
+    var output = this.getFormattedTime() + " - (" + this.getTime() + " milliseconds)";
+    $("#stopwatch").html(output);
 });

     

 
@@ -34,16 +57,42 @@ 
Example 2 - Countdown

         
         
     
-    
-var Example2 = $.countDown(function() {
-    $('#countdown').html(this.getFormattedTime());
+    
+var Example2 = $.countdown(function() {
+    $("#countdown").html(this.getFormattedTime());
     if (this.isFinished()) {
-        alert('Example 2: Countdown complete!');
+        alert("Example 2: Countdown complete!");
     }
 }, 20);

     

 
-    
Example 3 - Slideshow (preserves time remaining when paused)

+
+    
Example 3 - The original jQuery Timer (basically a suped-up version of setTimeout)

+    
timer has been executed 0 times.

+    

+        

+        

+        

+        

+        

+        
+    

+    

+        

+        

+        

+        

+        
+    

+    
+var count = 0;
+var timer = $.timer(function() {
+    $('#counter').html(++count);
+});
+timer.set({ time : 1000, autostart : true });

+
+
+    
Example 4 - Slideshow (preserves time remaining when paused)

     

         
         
@@ -65,31 +114,9 @@ 
Example 3 - Slideshow (preserves time remaining when paused)

     

     

         

-        
+        
     

 
-    
Example 4 - The Basics (just a suped-up version of setTimeout)

-    
timer has been executed 0 times.

-    

-        

-        

-        

-        

-        

-        
-    

-    

-        

-        

-        

-        

-        
-    

-    
-var count = 0;
-var timer = $.timer(function() {
-    $('#counter').html(++count);
-});
-timer.set({ time : 1000, autostart : true });

+
 
 
\ No newline at end of file
diff --git a/jquery.timer.js b/jquery.timer.js
index 2b63980..d723767 100644
--- a/jquery.timer.js
+++ b/jquery.timer.js
@@ -29,8 +29,8 @@
 ;(function($) {
 
     $.timer     = Timer;
-    $.stopWatch = StopWatch;
-    $.countDown = CountDown;
+    $.stopwatch = Stopwatch;
+    $.countdown = Countdown;
 
     $.timerUtil = {
         pad: pad,
@@ -284,10 +284,10 @@
     /**
      * @param {function=} updateFunction
      */
-    function StopWatch(updateFunction) {
+    function Stopwatch(updateFunction) {
 
         if (typeof this == "function" || this.init) {
-            return new StopWatch(updateFunction);
+            return new Stopwatch(updateFunction);
         }
 
         this.set(updateFunction);
@@ -298,7 +298,7 @@
     /**
      * @param {function=} updateFunction
      */
-    StopWatch.prototype.set = function(updateFunction) {
+    Stopwatch.prototype.set = function(updateFunction) {
 
         if (typeof updateFunction != "function") {
             return;
@@ -312,7 +312,7 @@
 
     };
 
-    StopWatch.prototype.timeUpdate = function() {
+    Stopwatch.prototype.timeUpdate = function() {
 
         if (this.startTime == 0) {
             this.timePassed = 0;
@@ -328,30 +328,30 @@
     /**
      * @returns {int}
      */
-    StopWatch.prototype.getTime = function() {
+    Stopwatch.prototype.getTime = function() {
         return this.timePassed > 0 ? this.timePassed : 0;
     };
 
     /**
      * @returns {string}
      */
-    StopWatch.prototype.getFormattedTime = function() {
+    Stopwatch.prototype.getFormattedTime = function() {
         return formatTime(this.getTime());
     };
 
-    StopWatch.prototype.stop = function() {
+    Stopwatch.prototype.stop = function() {
         this.clearInterval();
         this.startTime = 0;
         this.timeUpdate();
     };
 
-    StopWatch.prototype.pause = function() {
+    Stopwatch.prototype.pause = function() {
         this.clearInterval();
         this.pauseStart = new Date().getTime();
         this.timeUpdate();
     };
 
-    StopWatch.prototype.toggle = function() {
+    Stopwatch.prototype.toggle = function() {
         if (this.pauseStart  || this.startTime == 0) {
             this.start();
         }
@@ -360,7 +360,7 @@
         }
     };
 
-    StopWatch.prototype.setInterval = function() {
+    Stopwatch.prototype.setInterval = function() {
 
         this.clearInterval();
         this.interval = setInterval(interval, 1000/30);
@@ -372,11 +372,11 @@
 
     };
 
-    StopWatch.prototype.clearInterval = function() {
+    Stopwatch.prototype.clearInterval = function() {
         clearInterval(this.interval);
     };
 
-    StopWatch.prototype.start = function() {
+    Stopwatch.prototype.start = function() {
 
         if (!this.startTime) {
             this.startTime = new Date().getTime();
@@ -397,10 +397,10 @@
      * @param {function=} updateFunction
      * @param {int=} countdown
      */
-    function CountDown(updateFunction, countdown) {
+    function Countdown(updateFunction, countdown) {
 
         if (typeof this == "function" || this.init) {
-            return new CountDown(updateFunction, countdown);
+            return new Countdown(updateFunction, countdown);
         }
 
         this.set(updateFunction, countdown);
@@ -408,12 +408,12 @@
         return this;
     }
 
-    CountDown.prototype = new StopWatch();
+    Countdown.prototype = new Stopwatch();
 
     /**
      * @param {int} countdown
      */
-    CountDown.prototype.setCountdown = function(countdown) {
+    Countdown.prototype.setCountdown = function(countdown) {
         this.countdown = countdown * 1000;
     };
 
@@ -421,17 +421,17 @@
      * @param {function=} updateFunction
      * @param {int=} countdown
      */
-    CountDown.prototype.set = function(updateFunction, countdown) {
+    Countdown.prototype.set = function(updateFunction, countdown) {
         this.setCountdown(countdown);
-        StopWatch.prototype.set.apply(this, [updateFunction]);
+        Stopwatch.prototype.set.apply(this, [updateFunction]);
     };
 
     /**
      * @returns {int}
      */
-    CountDown.prototype.getTime = function() {
+    Countdown.prototype.getTime = function() {
 
-        var time = this.countdown - StopWatch.prototype.getTime.apply(this);
+        var time = this.countdown - Stopwatch.prototype.getTime.apply(this);
 
         if (time <= 0) {
             time = 0;
@@ -450,15 +450,15 @@
     /**
      * @returns {boolean}
      */
-    CountDown.prototype.isFinished = function() {
+    Countdown.prototype.isFinished = function() {
         return this.finished;
     };
 
-    CountDown.prototype.start = function() {
+    Countdown.prototype.start = function() {
         if (this.getTime() == 0) {
             this.startTime = 0;
         }
-        StopWatch.prototype.start.apply(this);
+        Stopwatch.prototype.start.apply(this);
     };
 
     /**
diff --git a/res/demo.js b/res/demo.js
index 5c5b05d..2418075 100755
--- a/res/demo.js
+++ b/res/demo.js
@@ -1,12 +1,12 @@
-var Example1 = $.stopWatch(function () {
+var Example1 = $.stopwatch(function () {
     var output = this.getFormattedTime() + " - (" + this.getTime() + " milliseconds)";
-    $('#stopwatch').html(output);
+    $("#stopwatch").html(output);
 });
 
-var Example2 = $.countDown(function() {
-    $('#countdown').html(this.getFormattedTime());
+var Example2 = $.countdown(function() {
+    $("#countdown").html(this.getFormattedTime());
     if (this.isFinished()) {
-        alert('Example 2: Countdown complete!');
+        alert("Example 2: Countdown complete!");
     }
 }, 20);
 
@@ -21,7 +21,7 @@ var Example2 = $.countDown(function() {
  * play again, the timer continues where it ended instead of
  * starting over again.
  */
-var Example3 = new (function() {
+var Example4 = new (function() {
     var $galleryImages, // An array of image elements
         $timeRemaining, // Usually hidden element to display time when paused
         imageId = 0, // Which image is being shown
@@ -37,7 +37,7 @@ var Example3 = new (function() {
         init = function() {
             $galleryImages = $('.galleryImages img');
             $timeRemaining = $('#timeRemaining');
-            Example3.Timer = $.timer(updateTimer, incrementTime, true).once();
+            Example4.Timer = $.timer(updateTimer, incrementTime, true).once();
         };
     this.toggleGallery = function() {
         if (this.Timer.isActive) {
diff --git a/res/style.css b/res/style.css
index 8a83a94..f0c398c 100755
--- a/res/style.css
+++ b/res/style.css
@@ -10,7 +10,7 @@ label {
 }
 input[type=button] {
     padding: 4px 10px;
-    margin: 5px 0 0;
+    margin: 7px 7px 0 0;
     font-size: 14px;
     width: 200px;
     color: #3a3a3a;
@@ -30,13 +30,15 @@ a:hover {
     color: #000;
     cursor: pointer;
 }
-p {
+hr {
+    width: 650px;
+    margin: 12px 0;
 }
 pre {
     background-color: #eee;
     border: 1px solid #ccc;
-    width: 600px;
-    padding: 5px;
+    width: 620px;
+    padding: 10px 15px;
 }
 div {
     display: inline-block;

From 5af204993951c24eef755549921b8938f39bbd4e Mon Sep 17 00:00:00 2001
From: Burak Ozdemir 
Date: Fri, 20 Jan 2017 13:20:00 +0300
Subject: [PATCH 3/3] Added autoplay option to the stopwatch.

---
 jquery.timer.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/jquery.timer.js b/jquery.timer.js
index 55861d1..8702f16 100644
--- a/jquery.timer.js
+++ b/jquery.timer.js
@@ -283,22 +283,24 @@
 
     /**
      * @param {function=} updateFunction
+     * @param {boolean=} autostart
      */
-    function Stopwatch(updateFunction) {
+    function Stopwatch(updateFunction, autostart) {
 
         if (typeof this == "function" || this.init) {
-            return new Stopwatch(updateFunction);
+            return new Stopwatch(updateFunction, autostart);
         }
 
-        this.set(updateFunction);
+        this.set(updateFunction, autostart);
 
         return this;
     }
 
     /**
      * @param {function=} updateFunction
+     * @param {boolean=} autostart
      */
-    Stopwatch.prototype.set = function(updateFunction) {
+    Stopwatch.prototype.set = function(updateFunction, autostart) {
 
         if (typeof updateFunction != "function") {
             return;
@@ -306,9 +308,13 @@
 
         this.init = true;
         this.updateFunction = updateFunction;
-        this.startTime = new Date().getTime();
+        this.startTime = 0;
         this.pauseStart = 0;
-        this.setInterval();
+
+        if (autostart) {
+            this.startTime = new Date().getTime();
+            this.setInterval();
+        }
 
     };