-
-
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(); | |
} |
@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!
I would change https://gist.github.com/electricg/4372563#file-stopwatch-js-L61
to