JS 46 定时器setInterval

最新推荐文章于 2023-06-03 09:30:00 发布

肝JOJO

最新推荐文章于 2023-06-03 09:30:00 发布

阅读量266

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/102557471

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

一. setInterval()定时器会每隔一段时间,就去调用一次函数

1.语法:window.setInterval(回调函数,间隔的毫秒数);
2.注意:
①可以省略window
②延迟时间单位为毫秒,可以省略,省略默认为0
③这个调用函数可以直接写函数,也可以写函数名
④页面中可能有很多计时器,我们通常给计时器加标识符(名字)
3.案例:实现一个倒计时效果
注意:
①第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
②最好采取封装函数的方式,这样可以先调用一次这个函数,防止空白问题
效果:输入未来的时间进行倒计时
在这里插入图片描述
代码如下:

    window.onload=function(){
        var h=document.querySelector('.h');
        var m=document.querySelector('.m');
        var s=document.querySelector('.s');
        var inputTime=+new Date('2019-10-15 18:00:00');  //输入时间的总毫秒数
        countDown();  //先调用一次,防止第一次空白
        setInterval(countDown,1000);  //计时器一秒执行一次
        function countDown(){
            var nowTime=+new Date();
            var times=(inputTime - nowTime)/1000;  //剩余的总秒数
            var h1=parseInt(times/60/60%24);  //剩余小时 parseInt函数可解析一个字符串，并返回一个整数。
            h1=h1<10 ? "0"+h1 : h1;
            h.innerHTML=h1+':';  //小时盒子
            var m1=parseInt(times/60%60);  //剩余分钟
            m1=m1<10 ? "0"+m1 : m1;
            m.innerHTML=m1+':';  //分钟盒子
            var s1=parseInt(times%60);  //剩余秒
            s1=s1<10 ? "0"+s1 : s1;
            s.innerHTML=s1;  //秒盒子
        }
    }
<body>
    <div>
        <span class="h"></span>
        <span class="m"></span>
        <span class="s"></span>
    </div>
</body>

二.window.clearInterval(intervalID); 停止setInterval()定时

案例:通过点击按钮实现函数开始,停止计时器

    window.onload=function(){
        var begin=document.querySelector('.begin');
        var stop=document.querySelector('.stop');
        var timer=null;  //全局变量
        begin.addEventListener('click',function(){
            timer=setInterval(function(){  //将定时器放入全局变量
                console.log('开始计时器');
            });
        });
        stop.addEventListener('click',function(){
            clearInterval(timer);
        });
    }
<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
</body>

案例:发送短信案例

要求:点击按钮后,3S之内不能再次点击.防止重复发送短信
分析:
1.点击按钮后,禁用按钮,disable=true
2.按钮button里面的内容会变化(用定时器每秒减一),通过innerHTML修改
3.定义一个变量,在定时器里面递减
4.变量为0时,停止计时器,并且复原按钮状态
注:this指向
1.全局作用域或者普通函数中,this指向全局对象window(定时器里面的this指向window)
2.方法调用中谁调用指向谁
3.构造函数中this指向构造函数的实例
效果:
在这里插入图片描述
代码如下:

    window.onload=function(){
        var btn=document.querySelector('button');
        var time=3;  //定义剩下的秒数(全局变量)
        btn.addEventListener('click',function(){
            this.disabled=true;
            var timer=setInterval(function (){
                if(time==0){
                    clearInterval(timer);
                    btn.disabled=false;
                    btn.innerHTML='发送';
                    time=3;  //以便下次重新开始计时                      
                }else{
                    btn.innerHTML='还剩下'+time+'秒';
                    time--;
                }
            },1000);                     
        });
    }
<body>
   手机号码<input type="number">
   <button>发送</button>    
</body

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 46 定时器setInterval

setInterval()定时器会每隔一段时间,就去调用一次函数1.语法:window.setInterval(回调函数,间隔的毫秒数);2.注意:①可以省略window②延迟时间单位为毫秒,可以省略,省略默认为0③这个调用函数可以直接写函数,也可以写函数名④页面中可能有很多计时器,我们通常给计时器加标识符(名字)3.案例:实现一个倒计时效果注意:①第一次执行也是间隔毫秒数,因此...
复制链接

扫一扫