发送短信按钮倒计时案例 

<body>
    <input type="text">
    <button>发送</button>
</body>
<script>
    var sent = document.querySelector('button');
    var search = document.querySelector('input');
    var time = 10;  //10秒倒计时
    sent.addEventListener('click', function () {
        sent.disabled = true;   //禁用按钮
        sent.innerHTML = '还剩' + time + '秒';  //消去一秒空白
        var timer = setInterval(function () {//每秒执行
            if (time === 1) {    //停止重复
                sent.innerHTML = '发送';  //恢复初始按钮状态
                sent.disabled = false;  //取消按钮禁用
                time = 10;  //回复秒数，供下次使用
                clearInterval(timer);  //停止计时
            } else {
                time--;  //秒数递减
                sent.innerHTML = '还剩' + time + '秒'; //显示秒数
            }
        }, 1000);
    });
</script>

 

posted @ 2020-10-11 11:08  WP-WangPin  阅读(148)  评论(0)    收藏  举报