js计时器案例讲解-优快云博客

本文链接：https://blog.youkuaiyun.com/ZiXiaweb/article/details/108565657

本文详细介绍了JavaScript定时器的概念，包括定时器的工作原理、两种类型的定时器（间隔定时器和一次性定时器）的区别，以及定时器队列的运作方式。通过一个具体的间隔定时器案例，展示了如何设置定时器并在指定时间间隔后执行特定操作。同时指出，定时器的执行时间会受到电脑实际时间的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是js定时器？

定时器：

设置一个定时器，再设置一个等待的时间，到达指定时间后，执行对应的操作

两种定时器：

用法一样,区别一个执行后不会停下来，一个只执行一次

window.setInterval([function],[interval]);
//设置一个定时器，到达指定时间[interval] 执行我们的操作[function],然后定时器
//并没有停止，以后每隔这么长时间，都重新执行我们的function

window.setTimeout([function],[interval]);
/*设置一个定时器，到达指定的时间[interval],执行我们的操作[function]，
定时器停止。*/

定时器队列：定时器都有返回值，返回的是一个数字，代表当前是第几个定时器。

来看一个例子：
设置一个interval,每隔1000毫秒就执行

functionvar count=0;
var timer=window.setInterval(function(){
    count++;
    console.log(count);
},1000);

接下来我要把计时器放入下面计时器案例：

<body>
<div id="div1">北京时间：</div>
<script type="text/javascript">
//获取当前自己电脑的时间(时间数据格式：对象数据类型）
/* var time = new Date();    
console.log(time);*/
    
//可以看出在控制台输出结果是：中国标准时间，接下来我们要把这种格式变成下面这种格式
//"XXXX年XX月XX日 星期X XX时XX分XX秒"变成我们这个时间格式的字符串
var oDiv=document.getElementById("div1");
var timeStr=formatTime();
oDiv.innerHTML+=timeStr;
var timer=window.setInterval(function(){ //添加计时器，每隔一秒（1000毫秒=1秒），在页面执行一次方法
     var timeStr=formatTime();
     oDiv.innerHTML="北京时间："+timeStr;
},1000)

//方法开始，标准化年月日，星期，时分秒
 function formatTime(){
     var time=new Date();//时间格式数据，或得本地当前时间
     var year=time.getFullYear();  //获得年
     var month=time.getMonth()+1; //0-11代表我们的1-12月,所以要+1才能代表我们中国的月
     var day=time.getDate();     //获得日
     var w=time.getDay();       //获得星期    ；获得结果0-6代表周日-周六
     //w获取结果会是0-6，但输出星期0，星期6，是不对，所以我们要进行转换
     //既然是0-6，那么就存在索引。既然能代表索引，那只要有字符串我们就能找到字符了
     var wStr="日一二三四五六",week=wStr.charAt(w);   //用charAt(索引)  方法，获取索引
     var hours=time.getHours();     //获取时
     var minutes=time.getMinutes(); //获取分钟
     var seconds=time.getSeconds(); //获取秒
     var mlSeconds=time.getMilliseconds();  //毫秒
     return year+"年"+zero(month)+"月"+zero(day)+"日 星期" //把获取的年月日星期时分秒拼接起来，记得要补0
     +week+" "+zero(hours)+"时"+zero(minutes)+"分"+zero(seconds)
     +"秒";
 }
 //由于月和日会出现个位数，所以要补零
 function zero(value){
     return value<10?"0"+value:value;
 }
</script>
</body>
</html>