在网页上实现自动计时

在网页上实现自动计时

<script>
x=0
y=-1
function countMin( )
{ y=y+1
 document.displayMin.displayBox.value=y
 setTimeout("countMin( )",60000)
}
Function countSec( )
{ x=x+1
z =x%60
 document.displaySec.displayBox.value=z
 setTimeout("countSec( )", 1000)
}
<table> 你在本网页中驻足的时间是:
<td> <form name=displayMin>
<input type="text" name="displayBox" value="0" size=4 >
</form></td>
<td>分</td>
<td> <form name=displaySec> </td>
<td> <input type="text" name="displayBox" value="0" size=4 >
</form> </td>
<td> 秒</td> </tr> </table>
<script>
countMin( )
countSec( )
</script>

这个网页是两个function，一个用来计分，一个用来计秒，这只是计时的一种方式，但是这种方式计时很不准确，z=x%60 表示先进行x/60,得出的余数作为z的值, 例如82秒, modulus就是22, 所以文字框会显示22而不是82。若你要將单位数字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:

functioncountSec( )
{x=x+1
z=x%60
if (z < 10){z= "0"+z}
 document.displaySec.displayBox.value=z
 setTimeout("countSec( )",1000)
}

需要断续进行计数的时：就会设计到另一个方法：clearTimeout(timeoutID)
这里的timeoutID就是给setTimeout设定的变量名。
例如：
meter1=setTimeout("count1( )", 1000)
<input type="text" name="box1" value="0" size=4 >
<input type=button value="停止计数" onClick="clearTimeout(meter1) " >
<input type=button value="继续计数" onClick="count1( ) " >
这个方法有很大的不足啊！为什么呢？
但你点击按钮时，多点几次，发现数据结果不准确……
这时：你可以用一个flag来标记，

<script>
x=0
flag=0
function count()
{x=x+1
 document.display.box.value =x
timeoutID=setTimeout("count( )", 1000)
flag=1
}
Function restart( )
{if (flag==0)
{count( )}
}
</script></head>
<input type="text" name="box" value="0" size=4 >
<input type=button value="停止计时"
onClick="clearTimeout(timeoutID); flag=0 " >
<input type=button value="继续计时" onClick="restart()" >

这样子就可以解决上面的问题了……