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. HDU 1003 最大连续子段和

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1003 Max Sum Time Limit: 2000/1000 MS (Java/Others)M ...

  2. 现代软件工程构建之法 前五章阅读感想&困惑

    第一章 第一节 新时代中国的IT产业市场规则不规范,书中提到社会上有个别软件公司的软件一定要卸载别家公司的软件才能运行,我这里感到疑惑---————是不是说如果 一间软件公司他能做出一个像微软操作系统 ...

  3. wait 和 sleep 区别

    /* wait 和 sleep 区别? 1,wait可以指定时间也可以不指定. sleep必须指定时间. 2,在同步中时,对cpu的执行权和锁的处理不同. wait:释放执行权,释放锁. sleep: ...

  4. 四人小组：vip会员管理系统

    需求概述: 针对各类商铺百花齐放的现状,越来越多的商家考虑用各种方式招揽顾客,会员制度一向是吸引回头客的不二法宝.用户持有会员卡能够迅捷的购物,享有普通顾客更多的优惠或回馈.乃至新品推送.积分等一系列 ...

  5. ecplise maven springmvc工程搭建

    转载自:https://www.cnblogs.com/crazybirds/p/4643497.html 内网上网代理配置: 第一步:新建maven项目,选择Maven Project,如图1.   ...

  6. 在Google Chrome中快速解除网页屏蔽鼠标右键、复制等限制

    第一步,将书签栏设置为显示状态!   第二步,添加新书签——>在标签栏点击右键,选择“添加网页”. 第三步,设置新书签的内容. 1.起名.这个凭个人爱好吧 2.网址栏输入: javascript ...

  7. SQLSERVER 修改实例名以及架构信息

    1. GUI的方式 后者是 alter database 的方式修改 instance的名字 2. 在全局的安全性下面创建用户. 3. 在实例的安全性下面创建架构和用户(架构名与用户名一直, 使用新实 ...

  8. Java并发编程实战2-线程安全

    1. 定义 一个类是线程安全的,是指在被多个线程访问时,类可以持续进行正确的行为. 2. WHY 我们想要的是线程安全的程序,为什么在线程安全的开始讲线程安全的类呢? 编写线程安全的代码,本质上就是管 ...

  9. sql中的duplicate的使用

    应用场景:有时候在做一些系统设置功能的时候,系统在第一次使用,或者初始化的时候,该设置信息并没有存在于数据库中,或者该系统设置信息永远只保存一条,没有必要为增加和修改这条信息而分别编写insert和u ...

  10. 数据结构之二叉树java实现

    二叉树是一种非线性数据结构,属于树结构,最大的特点就是度为2,也就是每个节点只有一个左子树和一个右子树.二叉树的操作主要为创建,先序遍历,中序遍历,后序遍历.还有层次遍历.遍历有两种方式,一是采用递归 ...