diff --git a/demo.html b/demo.html index c168f13..34dd330 100755 --- a/demo.html +++ b/demo.html @@ -15,49 +15,59 @@

jQuery Timer Demo

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

View Source

-

Example 1 - Stopwatch (counts ups)

- 00:00:00 +
+ +

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() + " - (" + this.getTime() + " milliseconds)";
+    $("#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)

-
- - - - - - - - - - - - - - - - - -

-

-

- -

-

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

+

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

timer has been executed 0 times.


@@ -74,11 +84,39 @@

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


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

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

+    

+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+    

+    

+        

+        
+    

+
+
 
 
\ No newline at end of file
diff --git a/jquery.timer.js b/jquery.timer.js
index ed9b49e..8702f16 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.
@@ -273,5 +280,213 @@
         return this;
 
     };
-    
+
+    /**
+     * @param {function=} updateFunction
+     * @param {boolean=} autostart
+     */
+    function Stopwatch(updateFunction, autostart) {
+
+        if (typeof this == "function" || this.init) {
+            return new Stopwatch(updateFunction, autostart);
+        }
+
+        this.set(updateFunction, autostart);
+
+        return this;
+    }
+
+    /**
+     * @param {function=} updateFunction
+     * @param {boolean=} autostart
+     */
+    Stopwatch.prototype.set = function(updateFunction, autostart) {
+
+        if (typeof updateFunction != "function") {
+            return;
+        }
+
+        this.init = true;
+        this.updateFunction = updateFunction;
+        this.startTime = 0;
+        this.pauseStart = 0;
+
+        if (autostart) {
+            this.startTime = new Date().getTime();
+            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..2418075 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
@@ -89,7 +21,7 @@ var Example2 = new (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
@@ -105,13 +37,13 @@ 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) {
             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..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: 490px;
-    padding: 5px;
+    width: 620px;
+    padding: 10px 15px;
 }
 div {
     display: inline-block;
@@ -72,6 +74,6 @@ div {
     width: 250px;
     margin-bottom: 10px;
 }
-#example2form, .example-three {
+.example-three {
     margin-bottom: 40px;
 }
\ No newline at end of file