js中计时器重要使用window.setInterval()方法和window.setTimeout()方法，

其中setInterval()方法的作用是每隔一段时间执行一次方法，而window.setTimeout()在一段时间内调用函数。

setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的，还有清除这两个函数效果的

两个方法，分别是window.clearInterval()和window.clearTimeout()。

1.setInterval()和clearInterval()  (window可以省略)

(1)setInterval()方法常用的语法如下：

setInterval(function,interval)；

其中function是将要在间隔时间内执行的函数，interval是间隔的时间，单位是毫秒。

(2)clearInterval()方法的常用语法如下：

timer = setInterval(function,interval)；

clearInterval(timer);

例子：

 <html>

     <head></head>

     <body>

         <p id="timer">点击开始计时！</p>

         <div>

             <button id="cutTimer" onclick="start()">开始</button>

             <button id="cutTimer" onclick="stop()">停止</button>

         </div>

         <script>

             var cutT = document.getElementById("cutTimer");

             var timer1 = null;

             function start(){

                 var countTime = function(){

                     date = new Date();

                     dateStr = date.toLocaleTimeString();

                     document.getElementById("timer").innerHTML = dateStr;

                 }

                 timer1 = window.setInterval(countTime,1000);

             }

             function stop(){

                 console.log("timer stop:"+timer1);

                 window.clearInterval(timer1);

             };

         </script>

     </body>

 </html>

在这个例子中，点击开始后(会有一段延迟)，页面上每隔1000毫秒（也就是1秒）执行一次，也就是显示当前的时分秒。

2.setTimeout()和clearTimeout()

这两个方法与setInterval()和clearInterval()方法用法类似，示例如下：

 <html>

     <head></head>

     <body>

         <p id="timer"></p>

         <div>

             <button id="cutTimer" onclick="timeOutAlert();">执行</button>

             <button id="cutTimer" onclick="stopTimeOutAlert();">停止</button>

         </div>

         <script>

             timeOut = null;

             function timeOutAlert(){

                 timeOut = window.setTimeout(function(){

                     console.log("time out..."+timeOut);

                     timeOutAlert();

                 },1000);

             }

             function stopTimeOutAlert(){

                 console.log("timeCut:"+timeOut);

                 window.clearTimeout(timeOut);

             }

         </script>

     </body>

 </html>

可以看到timeOutAlert()方法每隔1000毫秒调用自身，在控制台打印出当前timeOut的值，timeOut第一次使用

setTimeout()后为1，每次增加1，clearTimeout()通过这个数字作为入参清除当前的setTimeout()。

js计时器方法的使用的更多相关文章

  1. js计时器方法 setInterval(),setTimeout()

    window.setInterval() 周期性地调用一个函数(function)或者执行一段代码. var intervalID = window.setInterval(func, delay[, ...

  2. js调用php和php调用js的方法举例

    js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...

  3. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

  4. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  6. JS扩展方法——字符串trim()

    转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> ...

  7. Js apply 方法 详解

    Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  8. JavaScript基础12——js的方法重载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS replace()方法-字符串首字母大写

    replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace()方法有两个参数,第一个参数是正则表达式,正则表达式如果带全局标志/g,则是代表替换 ...

随机推荐

  1. IO异常 的处理

    package com.throwsss; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFou ...

  2. 1001 A+B

    代码链接 PDF链接 首先要说的是这道题的难点是如何把数字输出加入逗号,毕竟数据范围并没有超过Long.当然这个难点也不是问题,将数字转为字符串,C中就有这样的函数,然后再用 %3==0 这样来控制输 ...

  3. 第三个spirit（第十四天）

    一 .进度(自习室) 本来十号要开始进行第三次冲刺,不过因为团队很多成员要进行协会和组织的换届,而且团队还换了新 人又加了人进来,所以我们今天才是第三次冲刺的第一天.我们进行了新团队的第一次会议.基于 ...

  4. 【Coursera】因子分析模型

    一.协方差矩阵 协方差矩阵为对称矩阵. 在高斯分布中,方差越大,数据分布越分散,方差越小发,数据分布越集中. 在协方差矩阵中,假设矩阵为二维,若第二维的方差大于第一维的方差,则在图像上的体现就是:高斯 ...

  5. javascript修改div大小遮挡页面渲染问题

    页面中引入了其他js文件,浏览器窗口改变,页面没有跟随渲染问题.最后找到原因是因为这个js方法少了最后一行: "right": RightBox_w. window.onresiz ...

  6. Alpha版本冲刺（四）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:丹丹 组员7:何家伟 组员8:政演 组员9:鸿杰 组员10:刘一好 组员:何宇恒 展示组内最新 ...

  7. thinkphp学习2-控制器

    1.定义控制器 一般来说,ThinkPHP的控制器是一个类,而操作则是控制器类的一个公共方法. 控制器通常需要继承系统的Controller类或者其子类,例如,下面定义了一个 \Home\Contro ...

  8. poi excel导入 数字自动加小数点

    问题:导入excel表,若表格中为整数数字,不管单元格设置成数字格式还是文本格式,导入时都会出现小数点和0. 我遇到的问题是:一个名称,做测试数据的时候做了纯整形数字,发现了这个问题. 解决办法:在代 ...

  9. PAT 甲级 1155 Heap Paths

    https://pintia.cn/problem-sets/994805342720868352/problems/1071785408849047552 In computer science, ...

  10. MiniUI合并单元格

    function onload(e){ var grid = e.sender; var len = grid.data.length; var data= grid.data; ,num=; var ...