8-6 取消计时器clearTimeout()
本节编程练习不计算学习进度,请电脑登录imooc.com操作

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用,停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是,现在我们添加了一个 "Stop" 按钮来停止这个计数器:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

 

任务

补充右边编辑器第16行,完成取消计时器函数。

补充右边编辑器第23行,点击Start按钮后,开始计数。

补充右边编辑器第24行,点击Stop按钮后,停止计数。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>计时器</title>
  6.  
  7. <script type="text/javascript">
  8. var num=0;
  9. var i;
  10. function startCount(){
  11. document.getElementById('count').value=num;
  12. num=num+1;
  13. i=setTimeout("startCount()",1000);
  14. }
  15. function stopCount(){
  16.  
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <form>
  22. <input type="text" id="count" />
  23. <input type="button" value="Start" />
  24. <input type="button" value="Stop" />
  25. </form>
  26. </body>
  27. </html>
下一节