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. Git初用心得

    第一次使用git,因为之前操作系统的实验需要,在虚拟机中使用过lniux系统,所以对这种用指令输入而不是图形化的程序感觉不是很陌生.感觉git还是很人性化的,git gui就是图形界面,操作起来也不复 ...

  2. 第一个spring冲刺第二天

    讨论成员:王俊凯.罗凯杰.王逸辉.马志磊 地点:宿舍 话题:讨论关于安卓的控件的应用和如何调用 选题:四则运算 方向:更加实用的计算器功能,功能更加实用并且简单,没有太多的繁琐操作,可以的话会加上些趣 ...

  3. 结对作业——web四则运算

    目录: 一.Coding.net项目地址 二.PSP 三.接口设计 四.接口实现 五.性能分析 六.单元测试 七.异常处理 八.模块设计 九.模块对接 十.结对 十一.思考 十二.PSP 网站:htt ...

  4. Akka系列---什么是Actor

    本文已.Net语法为主,同时写有Scala及Java实现代码 严肃的说,演员是一个广泛的概念,作为外行人我对Actor 模型的定义: Actor是一个系统中参与者的虚拟人物,Actor与Actor之间 ...

  5. Nfs的简单了解

    近期在上传公司课件课程,上传的思路是,在45服务器上建立44服务器的nfs的连接,然后将43服务器上的课件拷贝到建立好的nfs上,再运行课件解析工具,解析整理好的excel即可完成课程的上传.在45服 ...

  6. Linux内核0.11 bootsect文件说明

    一.总体功能介绍 这是关于Linux-kernel-0.11中boot文件夹下bootsect.s源文件的说明,其中涉及到了一些基础知识可以参考这两篇文章. 操作系统启动过程 软盘相关知识和通过BIO ...

  7. Linux下的网卡Bonding

    1. 网卡Bonding一共有0-6七种mode,具体区别请自行搜索: 2. 建议通过nmtui命令在交互模式下配置,这样不会落下重要的字段,也不用去记忆到底有哪些字段: 3. 我的实验环境是VMWa ...

  8. [华三] IPv6技术白皮书(V1.00)

    IPv6技术白皮书(V1.00) http://www.h3c.com/cn/d_200802/605649_30003_0.htm H3C S7500E IPv6技术白皮书 关键词:IPv6,隧道 ...

  9. Word中怎样删除分节符而不影响前节页面设置

    在Word中,通过常规方法删除一个不需要的分节符时,会默认将分节符后面的页面设置带入前一节.比如,第一节是纵向排版,第二节是横向排版,当删除第二节的全部内容,包括二者之间的分节符之后,就会使得第一节的 ...

  10. ThreadLocal 定义，以及是否可能引起的内存泄露(threadlocalMap的Key是弱引用，用线程池有可能泄露)

    ThreadLocal 也可以跟踪一个请求,从接收请求,处理请求,到返回请求,只要线程不销毁,就可以在线程的任何地方,调用这个参数,这是百度二面的题目,参考: Threadlocal 传递参数(百度二 ...