JavaScript中定时器的创建（重点）

最新推荐文章于 2023-04-30 13:59:02 发布

原创最新推荐文章于 2023-04-30 13:59:02 发布

· 465 阅读

1 ·

版权

文章标签：

#javascript #前端 #html #css

本文主要探讨JavaScript中的定时器，包括setTimeout()用于一次性执行的延迟操作，以及setInterval()用于周期性调用的定时任务。通过示例介绍了如何创建和清除定时器，并强调了在实际应用中计算时间差实现倒计时的方法。

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

setTimeout()

定时器，在延迟多少毫秒执行函数，只执行一次。

第一个参数：调用的函数

第二个参数：延时的毫秒数,默认是0

小案例：注意的是第二个参数用，逗号隔开，参数为毫秒数，1000毫秒等于1秒

<div>5秒之后我会消失</div>
    <script>
        var div=document.querySelector('div');
    var a= setTimeout(function(){
            div.style.display='none'
        },5000)

clearTimeout(timeout);

清除定时器，清除之前需要创建定时器。

 <div>5秒之后我会消失</div>
    <script>
        var div=document.querySelector('div');
    var a= setTimeout(function(){
            div.style.display='none'
        },5000)
        clearTimeout(a)//清除定时器，首先需要先创建定时器

setInterval()

概念：每隔一段时间，都调用回调函数。


var i=0
var a=setInterval(function(){
    i++
    console.log(i);
},2000)
setTimeout(function(){
    clearInterval(a)
},2000)
    </script>
</body>
</html>

打印

setTimeout(function(){

clearInterval(myinterval);//清除定时器

},5000)

二，定时器（重点）
核心是学会获取时间差的毫秒值，通过计算得出倒计时时间，通过函数封装调用

<body>
    <div class="showTime"></div>
    <script>
        function showTime(){
        var nowTime=new Date();
        // console.log(nowTime);
        var endTime=new Date('2022-7-02');
        console.log(endTime);
        //核心思路，获取目标日期与当期日期的时间差（毫秒）
        var time=endTime.getTime()-nowTime.getTime();
        //获取毫秒差
        console.log(time);
        var day=Math.floor(time/(1000*60*60*24));//计算天数
        console.log(day);
        var hours=Math.floor(time/(1000*60*60)%24);//计算小时
        console.log(hours);
        var Minutes=Math.floor(time/(1000*60)%60);//计算分钟
        console.log(Minutes);
        var seconds=Math.floor(time/1000%60)//计算秒数
        console.log(seconds);
         return day+'天'+hours+'小时'+':'+Minutes+'分钟'+':'+seconds+'秒';//字符串拼接，return返回值

         }
var div=document.querySelector('.showTime');
setInterval(function(){
    div.innerHTML=showTime();//showTime()调用函数
},1000)//设置定时器，每隔一秒（1000毫秒）反复执行
    </script>
</body>
</html>

JavaScript中定时器的创建（重点）

二，定时器（重点）