-
-
Save electricg/4372563 to your computer and use it in GitHub Desktop.
| Copyright (c) 2010-2015 Giulia Alfonsi <[email protected]> | |
| Permission is hereby granted, free of charge, to any person | |
| obtaining a copy of this software and associated documentation | |
| files (the "Software"), to deal in the Software without | |
| restriction, including without limitation the rights to use, | |
| copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| copies of the Software, and to permit persons to whom the | |
| Software is furnished to do so, subject to the following | |
| conditions: | |
| The above copyright notice and this permission notice shall be | |
| included in all copies or substantial portions of the Software. | |
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | |
| EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES | |
| OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | |
| NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | |
| HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | |
| WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | |
| FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | |
| OTHER DEALINGS IN THE SOFTWARE. |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Stopwatch</title> | |
| </head> | |
| <body onload="show();"> | |
| <div>Time: <span id="time"></span></div> | |
| <input type="button" value="start" onclick="start();"> | |
| <input type="button" value="stop" onclick="stop();"> | |
| <input type="button" value="reset" onclick="reset()"> | |
| </body> | |
| </html> |
| // Simple example of using private variables | |
| // | |
| // To start the stopwatch: | |
| // obj.start(); | |
| // | |
| // To get the duration in milliseconds without pausing / resuming: | |
| // var x = obj.time(); | |
| // | |
| // To pause the stopwatch: | |
| // var x = obj.stop(); // Result is duration in milliseconds | |
| // | |
| // To resume a paused stopwatch | |
| // var x = obj.start(); // Result is duration in milliseconds | |
| // | |
| // To reset a paused stopwatch | |
| // obj.stop(); | |
| // | |
| var clsStopwatch = function() { | |
| // Private vars | |
| var startAt = 0; // Time of last start / resume. (0 if not running) | |
| var lapTime = 0; // Time on the clock when last stopped in milliseconds | |
| var now = function() { | |
| return (new Date()).getTime(); | |
| }; | |
| // Public methods | |
| // Start or resume | |
| this.start = function() { | |
| startAt = startAt ? startAt : now(); | |
| }; | |
| // Stop or pause | |
| this.stop = function() { | |
| // If running, update elapsed time otherwise keep it | |
| lapTime = startAt ? lapTime + now() - startAt : lapTime; | |
| startAt = 0; // Paused | |
| }; | |
| // Reset | |
| this.reset = function() { | |
| lapTime = startAt = 0; | |
| }; | |
| // Duration | |
| this.time = function() { | |
| return lapTime + (startAt ? now() - startAt : 0); | |
| }; | |
| }; | |
| var x = new clsStopwatch(); | |
| var $time; | |
| var clocktimer; | |
| function pad(num, size) { | |
| var s = "0000" + num; | |
| return s.substr(s.length - size); | |
| } | |
| function formatTime(time) { | |
| var h = m = s = ms = 0; | |
| var newTime = ''; | |
| h = Math.floor( time / (60 * 60 * 1000) ); | |
| time = time % (60 * 60 * 1000); | |
| m = Math.floor( time / (60 * 1000) ); | |
| time = time % (60 * 1000); | |
| s = Math.floor( time / 1000 ); | |
| ms = time % 1000; | |
| newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3); | |
| return newTime; | |
| } | |
| function show() { | |
| $time = document.getElementById('time'); | |
| update(); | |
| } | |
| function update() { | |
| $time.innerHTML = formatTime(x.time()); | |
| } | |
| function start() { | |
| clocktimer = setInterval("update()", 1); | |
| x.start(); | |
| } | |
| function stop() { | |
| x.stop(); | |
| clearInterval(clocktimer); | |
| } | |
| function reset() { | |
| stop(); | |
| x.reset(); | |
| update(); | |
| } |
Thanks !
The core code worked in part on my windows box. However, sometimes the buttons to stop/reset take several clicks to function (on firefox).
Thinking that updating the screen every msec might be a little too much overhead, I got them to work if the interval is changed from 1 msec to 1000 msec. I.e. clocktimer = setInterval("update()", 1000);
Then of course the formatTime function needs to be adjusted.
I would change https://gist.github.com/electricg/4372563#file-stopwatch-js-L61
var h = m = s = ms = 0;to
var h, m, s, ms = 0;@rstomsf but that leaves all variables except ms to be of type undefined, which makes them ambiguous. At least setting them all to 0 gives them all the number type.
Nice
The html doesnt work for me
Sweet!
I forked and updated to encapsulate everything https://gist.github.com/andytwoods/46eba3ddb06f78fb20bbf648def0e7d8
Thanks for original :)
Super simple, but what about cycles? There are a heap of unnecessary and wasted DOM updates going on. Consider switching setInterval to requestAnimationFrame - that should make it a heap more performant. :)
I would change https://gist.github.com/electricg/4372563#file-stopwatch-js-L61
var h = m = s = ms = 0;to
var h, m, s, ms = 0;@rstormsf but that leaves all variables except ms to be of type undefined, which makes them ambiguous. At least setting them all to 0 gives them all the number type.
@NormanBenbrahim After reading the comments, I'm curious whether one way or the other is the (more) correct way to go about writing this... sweet gist though!
very simple and nice