js-5s后重新发送短信（定时器，清除定时器）

最新推荐文章于 2024-07-03 11:07:37 发布

秋天1014童话

最新推荐文章于 2024-07-03 11:07:37 发布

阅读量2.2k

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53340782

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

5s后重新发送短信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js-手机发送短信倒计时</title>
    <style>
        button{
            width: 100px;
            height: 30px;
            border: none;
        }
        input{
            outline: none;
        }
    </style>
    <script>    
        window.onload = function(){
            function $(id){ return document.getElementById(id); }  
            $('btn').onclick = function(){
                clearInterval(timer); //清除计时器   
                var that = this;
                that.disabled = true;
                var count = 5;
                var timer = setInterval(function(){
                    if(count>0){
                        count--;
                        that.innerHTML = "剩余时间"+ count +"s";
                    }else{
                        that.innerHTML ="重新发送短信";
                        that.disabled = false;
                        clearInterval(timer); //清除计时器
                    }
                },1000);
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <input type="text" id="txt">
        <button id="btn" >点击发送短信</button>
    </div>
</body>
</html>

或者使用setTimeout来模拟，一般情况下，还是推荐使用setTimeout，更安全一些。当使用setInterval(fn,1000)时，程序是间隔1s执行一次，但是每次程序执行是需要3s，那么就要等程序执行完才能执行下一次，即实际间隔时间为（间隔时间和程序执行时间两者的最大值）。而setTimeout（fn，1000）,代表的是，延迟1s再执行程序，且仅执行一次。每次程序执行是需要3s，所以实际时间为 1s+3s=4s。可以使用setTimeout递归调用来模拟setInterval。

<script>    
        window.onload = function(){
            function $(id){ return document.getElementById(id); }  
            $('btn').onclick = function(){
                var that = this;
                that.disabled = true;
                var count = 5;
                var timer = setTimeout(fn,1000);
                function fn(){
                    count--;
                    if(count>0){
                        that.innerHTML = "剩余时间"+ count +"s";
                        setTimeout(fn,1000); 
                    }else{
                        that.innerHTML ="重新发送短信";
                        that.disabled = false;  
                    }
                }
            }
        }
    </script>

秋天1014童话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-5s后重新发送短信（定时器，清除定时器）

5s后重新发送短信<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px;
复制链接

扫一扫