秒表（计时器）

来源：互联网发布：java编程计算n的阶乘编辑：程序博客网时间：2024/05/19 00:47

这个练习主要用于巩固JavaScript计时器的使用。

主要技能点：

1.无限循环执行。设置一个函数，给函数里面设置一个计时器，并在计时器中自我调用该函数，就可以实现无限循环。例如此例中，startCount()函数中，t=setTimeout("startCount()",1000)。

2.变量的作用域。一定要注意变量的作用域，尤其是需要在其他函数中停止的计时器。一开始在startCount()函数中声明变量t（此时为局部变量），导致clearTimeout(i)无法调用i。需要在其他函数中停止的计时器应该声明为全局变量。

3.转义字符。HTML中单双引号""和''可以交替嵌套，双引号""中需要显示双引号，需要用转义字符。常用转义字符如下：

字符十进制转义字符"""&&&<<<>>>不断开空格(non-breaking space) 
 

代码如下：

<!DOCTYPE  HTML><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>秒表</title><style type="text/css">   </style></head><body>    <h1>秒表</h1>    <input type="text" id="count" value="点击"开始"按钮开始计时">    <br/><br/>    <input type="button" id="start" onclick="startCount()" value="开始">    <input type="button" id="stop" onclick="stopCount()" value="暂停">    <input type="button" id="clear" onclick="clearCount()" value="清零"><script type="text/javascript">     var num=0;     var i;     function startCount(){     document.getElementById("count").value=num;        num=num+1;     i=setTimeout("startCount()",1000);     }     function stopCount(){     clearTimeout(i);     }     function clearCount(){     document.getElementById("count").value=0;     num=0;     }</script></body></html>

0 0