Welcome to WebmasterWorld Guest from 35.173.47.43

Forum Moderators: open

Message Too Old, No Replies

Awesome stopwatch script!

but doesnt time hours :-(

     
7:56 pm on Jan 17, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


i found this awesome stopwatch script on the net, but it only times minutes, seconds, and milliseconds!
its all a bit much for me, but does anyone know how i would change this code to include hours?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stopwatch</title>

<script language="JavaScript" type="text/javascript">
<!--

var swCycleTime=50;

// Functional Code

var sw,swObj,swct,swnow,swcycle;
var swObjAry=new Array();

function swStart(id,ud){
swObj=document.getElementById(id);
swct=swObj.innerHTML.split(':');
swnow=new Date();
swObj.now=swnow.getTime();
swObj.reset=swObj.innerHTML;
swObj.ud=ud;
if (!isNaN(swObj.innerHTML)){
swObj.time=parseInt(swObj.innerHTML);
}
else if (swct.length==3){
swObj.time=(swct[0]*1000*60)+(swct[1]*1000)+parseInt(swct[2]);
}
else if (swct.length==2){
swObj.time=(swct[0]*1000)+parseInt(swct[1]);
}
else if (swct.length==1){
swObj.time=parseInt(swct[1]);
}
if (!swObj.time){
swObj.time=1;
}
if (!swObj.c){
swObj.c=ud;
swObjAry[swObjAry.length]=swObj;
}
}

function swStop(id){
swObj=document.getElementById(id);
if (!swObj.time){ return; }
swObj.time=null;
sw=new Date().getTime();
swObj.cycle+=(sw-swcycle);
if (swObj.ud=='-'){
swObj.cycle-=(sw-swcycle);
if (swObj.cycle<0){ swObj.cycle=0; }
}
swObj.innerHTML=(parseInt(swObj.cycle/1000/60)%60)+':'+((parseInt((swObj.cycle)/1000)%60)+':'+(swObj.cycle%1000));
}

function swCycle(){
swcycle=new Date().getTime();
for (sw0=0;sw0<swObjAry.length;sw0++){
if (swObjAry[sw0].time){
swObjAry[sw0].cycle=swObjAry[sw0].time+(swcycle-swObjAry[sw0].now);
if (swObjAry[sw0].ud=='-'){
swObjAry[sw0].cycle=swObjAry[sw0].time-(swcycle-swObjAry[sw0].now);
if (swObjAry[sw0].cycle<0){ swObjAry[sw0].cycle=0; swObjAry[sw0].time=0; }
}
swObjAry[sw0].innerHTML=(parseInt(swObjAry[sw0].cycle/1000/60)%60)+':'+((parseInt((swObjAry[sw0].cycle)/1000)%60)+':'+(swObjAry[sw0].cycle%1000));
}
}
}

function swReset(id,dt){
swObj=document.getElementById(id);
swObj.innerHTML=swObj.reset;
swObj.time=null;
}

setInterval('swCycle()',swCycleTime);

//-->
</script>

</head>

<body>
<input type="button" value="Start" onclick="swStart('beg2','+');">
<input type="button" value="Stop" onclick="swStop('beg2');">
<input type="button" value="Reset" onclick="swReset('beg2');">
<div id="beg2">59:55:000</div>
<br />
</body>
</html>

i have set the clock to begin on 59 minutes and 55 seconds to show you that the clock just zeroes when it reaches one hour :-( i really wish it would time hours as well, does anyone know how to change the code?

thanks!
delboy

3:03 pm on Jan 18, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


To modify it to support hours, look at this section:
else if (swct.length==3){ 

It's looking to see if the value has 3 parts (as in mm:ss:s). The right-most part is milliseconds, the middle part is seconds, the left-most part is minutes. So to support hours, you would want to add another section before that check:
[code]

else if (swct.length==4){
}
[code]

Then add the code to calculate the time using the 4 values from the array. You may need to modify other methods to support the 4 values as well. Why don't you give it a shot and then post your results here.
3:05 pm on Jan 18, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Note, you might also check out this thread:
[webmasterworld.com...]

Which has a couple of alternative ways.

7:11 pm on Jan 19, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


thanks dude!
its kind of making sense, think i'm on track now!
giving it a sho, i'll let you know!
12:44 am on Jan 20, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Multiple Stopwatches, hours mins seconds milliseconds</title>

<script language="JavaScript" type="text/javascript">
<!--

var swCycleTime=50; //run cycle every 50ms?

// Functional Code

var sw,swObj,swct,swnow,swcycle; //create some variables, we'll figure out what they are soon
var swObjAry=new Array(); //and i assume that for every stopwatch on the page an object is created and this is the container array

function swStart(id,ud){ //ok so you click the button which would onclick="swstart($divname,+);" the plus is for count upwards, you can - it
swObj=document.getElementById(id); //so the swobj var is your actual div by the look of it
swct=swObj.innerHTML.split(':'); //and it splits the time into minutes, seconds, milliseconds into an array
swnow=new Date(); //this is the time the button got clicked
swObj.now=swnow.getTime(); //and it fires that variable into swobj's now value
swObj.reset=swObj.innerHTML; //it takes a note of whats in the div so that when you reset, it puts the initial value back in
swObj.ud=ud; //the stopwatch object is told wether to count up or down
if (!isNaN(swObj.innerHTML)){ //if the initial value turns out to be a string,
swObj.time=parseInt(swObj.innerHTML); //parse it to an int
}
else if (swct.length==4){ //otherwise if our split is 4 long, for hours!
swObj.time=(swct[0]*1000*60)+(swct[1]*1000*60)+(swct[2]*1000)+parseInt(swct[3]); //the stopwatches time so far is mins + secs +ms (total being in ms)
}
else if (swct.length==3){ //otherwise if our split is 3 long
swObj.time=(swct[0]*1000*60)+(swct[1]*1000)+parseInt(swct[2]); //the stopwatches time so far is mins + secs +ms (total being in ms)
}
else if (swct.length==2){ //or if its just seconds and milliseconds
swObj.time=(swct[0]*1000)+parseInt(swct[1]);
}
else if (swct.length==1){ //or just milliseconds
swObj.time=parseInt(swct[1]);
}
if (!swObj.time){ //if it has only just started at 0
swObj.time=1; //give it a millisecond to get it started
}
if (!swObj.c){ //if there isnt a c value (whatever c is :-P )
swObj.c=ud; //then make it + or -, whatever ud was
swObjAry[swObjAry.length]=swObj; //i dont get this - make the number of stopwatches = swobj, the div? :-s
}
}

function swStop(id){ //anyway, so if you click the stop button (onclick="swstop($divname)"),
swObj=document.getElementById(id); //get the stopwatch div name
if (!swObj.time){ return; } //if there is no time variable, its already stopped. coolio.
swObj.time=null; //get rid of the time value
sw=new Date().getTime(); //this next bit will have to do with when you resume i suppose
swObj.cycle+=(sw-swcycle);
if (swObj.ud=='-'){
swObj.cycle-=(sw-swcycle);
if (swObj.cycle<0){ swObj.cycle=0; }
}
swObj.innerHTML=(parseInt(swObj.cycle/1000/60/60)%60)+':'+(parseInt(swObj.cycle/1000/60)%60)+':'+((parseInt((swObj.cycle)/1000)%60)+':'+(swObj.cycle%1000));
//display the time you stopped on, i added an extra bit here hor the hour
}

function swCycle(){ //and this will be the running cylce then
swcycle=new Date().getTime();
for (sw0=0;sw0<swObjAry.length;sw0++){
if (swObjAry[sw0].time){
swObjAry[sw0].cycle=swObjAry[sw0].time+(swcycle-swObjAry[sw0].now);
if (swObjAry[sw0].ud=='-'){
swObjAry[sw0].cycle=swObjAry[sw0].time-(swcycle-swObjAry[sw0].now);
if (swObjAry[sw0].cycle<0){ swObjAry[sw0].cycle=0; swObjAry[sw0].time=0; }
}

swObjAry[sw0].innerHTML=(parseInt(swObjAry[sw0].cycle/1000/60/60)%60)+':'+(parseInt(swObjAry[sw0].cycle/1000/60)%60)+':'+((parseInt((swObjAry[sw0].cycle)/1000)%60)+':'+(swObjAry[sw0].cycle%1000)); //added an hour bit here too
}
}
}

function swReset(id,dt){
swObj=document.getElementById(id);
swObj.innerHTML=swObj.reset;
swObj.time=null;
}

setInterval('swCycle()',swCycleTime);

//-->
</script>

</head>

<body>
<input type="button" value="Start" onclick="swStart('beg2','+');">
<input type="button" value="Stop" onclick="swStop('beg2');">
<input type="button" value="Reset" onclick="swReset('beg2');">
<div id="beg2">0:59:55:000</div>
<br />
</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members