取消计时器clearTimeout()

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

语法:

  1. clearTimeout(id_of_setTimeout)

参数说明:

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

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5.   var num=0,i;
  6.   function timedCount(){
  7.     document.getElementById('txt').value=num;
  8.     num=num+1;
  9.     i=setTimeout(timedCount,1000);
  10.   }
  11.     setTimeout(timedCount,1000);
  12.   function stopCount(){
  13.     clearTimeout(i);
  14.   }
  15. </script>
  16. </head>
  17. <body>
  18.   <form>
  19.     <input type="text" id="txt">
  20.     <input type="button" value="Stop" onClick="stopCount()">
  21.   </form>
  22. </body>
  23. </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. </head>
  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.     clearTimeout(i);
  17.   }
  18. </script>
  19. </head>
  20. <body>
  21.   <form>
  22.     <input type="text" id="count" />
  23.     <input type="button" value="Start" onclick="startCount()"  />
  24.     <input type="button" value="Stop" onclick="stopCount()"  />
  25.   </form>
  26. </body>
  27. </html>

JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT的更多相关文章

  1. JS window对象取消计时器clearInterval() clearInterval() 方法可取消由 setInterval() 设置的交互时间。

    取消计时器clearInterval() clearInterval() 方法可取消由 setInterval() 设置的交互时间. 语法: clearInterval(id_of_setInterv ...

  2. JS window对象 返回前一个浏览的页面 back()方法

    JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back();   返回前一个浏览的页面 back ...

  3. JS window对象详解

    window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象.一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一 ...

  4. js window对象

    BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象是(1)通过JavaScript访问浏览器窗口的一个接口 (2)ECMAScript规定的Global对象 1.全 ...

  5. 【repost】js window对象属性和方法相关资料整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  6. js window对象属相和方法相关整理资料

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  7. JS window对象的top、parent、opener含义

    .top 该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. .opener opener用于在window.open的页面引用执行该window ...

  8. JS window对象的top、parent、opener含义介绍 以及防止网页被嵌入框架的代码

    1.top该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. 2.openeropener用于在window.open的页面引用执行该window ...

  9. JS window对象的top、parent、opener含义介绍(转载)

    1.top该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. 2.openeropener用于在window.open的页面引用执行该window ...

随机推荐

  1. 11-vim-撤销和删除命令-01-撤销

    撤销和恢复撤销 命令 英文 功能 u undo 撤销上一次命令 ctrl  u redo 恢复撤销的命令

  2. 【Java学习笔记之一】 java关键字及作用

    Java关键字及其作用 一. 总览: 访问控制 private protected public 类,方法和变量修饰符 abstract class extends final implements ...

  3. 微服务-熔断器 Hystrix 的原理与使用

    前言 分布式系统中经常会出现某个基础服务不可用造成整个系统不可用的情况, 这种现象被称为服务雪崩效应. 为了应对服务雪崩, 一种常见的做法是手动服务降级. 而Hystrix的出现,给我们提供了另一种选 ...

  4. oracle null+字符串问题

    select 10 + 10 + 10 from dual结果是30,完全没问题. select null + 10 + 10 from dual结果是空串,但期望的结果是20. select nvl ...

  5. MySQL字符集不一致导致查询SQL性能问题

    今天做了一个MySQL数据库中的SQL优化. 结论是关联字段字符集不同,导致索引不可用. 查询的SQL如下: select `Alias`.`Grade`, `Alias`.`id`, `Alias` ...

  6. 微信小程序のwxs语言

    一.wxs介绍 wxs是微信小程序自身的脚本语言,用来过滤和计算.wxs可以通过文件可模块标签来定义 文件需要.wxs后缀文件 二.实例 <wxs module="test1" ...

  7. 第四章 K8s部署安装

    一.kube-proxy开启ipvs的前置条件 //1.加载netfilter模块 modprobe br_netfilter //2.添加配置文件 cat > /etc/sysconfig/m ...

  8. ORA-01400: cannot insert NULL into

    Error text: ORA-01400: cannot insert NULL into when insert into view, NULL value handler in trigger. ...

  9. 【CSS3】rgba与opacity

    RGBA 语法 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 为什么要用RGBA而不用opacity 因为在项目中需要用到一 ...

  10. 转译es6原生原生对象及方法,如Object.assign,Object.keys等，及promise

    下面主要为兼容恶心的ie 1,首先引入‘babel-polyfill’,可写在webpack.dev.js的entry.vendors数组里面 2,在入口文件如app.js里面import 'babe ...