主页 / 网络编程 /

js实现内置计时器

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了js实现内置计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系，它是实现这些的核心语法，如何一次深刻理解js计时器？往下看你就知道，有惊喜哦！

js计时器有两种，一种为延时后单次的执行，另一种为延时多次执行。通过函数的递归，前者也可以打破壁垒，拥有循环执行的功能。

setTimeout(  javascript语句  , 毫秒);
（其中第一个值可以是一个函数  需要加" "，也可以是代码）

//延迟一段时间 执行 执行一次

 setInterval("javascript语句"  , 毫秒);
（其中第一个值可以是一个函数  需要加" "，也可以是代码）

 //循环执行

具体实例 （一些细节和具体的用法还是在案例代码中便于理解）

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计时器</title>
  </head>
 
<body>
  <button id="none">停止计时器</button>
  <button id="start">开始计时器</button>
  <script>
    // 有两个计时器
    // setTimeout();
    // 延迟一段时间 执行 执行一次
    // setInterval();
    // 循环执行
    var stime=document.getElementById('none');//默认从零开始自加 获取开始按钮
    var starttime=document.getElementById('start');//获取停止按钮
    var count=0;
    var timecount;
    // 第一种
    /showtime();
    function showtime(){
      count++;
      console.log(count);
      timecount=setTimeout('showtime()',1000);//延时一秒
    }//利用递归来实现循环时间
    stime.onclick=function(){//停止计时器
      clearTimeout(timecount);//将计时器清除，即停止自加
    }
    starttime.onclick=function(){//开始计时器
      timecount=setTimeout('showtime()',1000);//继续开始自加
    }/
//优点重启计时器简单，由于是原本是单次执行，只需将之前的递归函数重新复制即可 缺点需要递归调用
    // 第二种
    showtime();
    function showtime(){//封装函数
      timecount=setInterval(function(){
        count++;
        console.log(count);
      },1000)
    }
    stime.onclick=function(){
      clearInterval(timecount);
    }
    starttime.onclick=function(){
      showtime();
    }
//优点不需要递归调用，直接实现循环。缺点重启较复杂，需要调用所有函数，建议封装函数。
  </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：NUXT SSR初级入门笔记(小结) 下一篇：js实现秒表计时器

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by