Forum Moderators: open
<!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
else if (swct.length==3){
[code]
else if (swct.length==4){
}
[code]
Which has a couple of alternative ways.
<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>
