一个延时器

最新推荐文章于 2022-09-30 21:00:00 发布

weixin_39094512

最新推荐文章于 2022-09-30 21:00:00 发布

阅读量232

点赞数

一个延时器。

<input type="text" value="请输入短信验证码"/>
<input type="button" value="点击发送验证码" id="btn"/>
<script>
    var timer = null;
    var num = 5;//记录时间的变量
    //需求：点击按钮 按钮中文字显示倒计时 倒计时后又恢复可以点击的状态
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        //btn.disabled = true;
        this.disabled = true;//this和btn指的都是按钮
        timer = setInterval(function () {
            //console.log(this);//在定时器的回调函数中this指的是window
            //倒计时
            num--;
            btn.value = num + "秒后可再次发送";
            //如果到了0就恢复可以点击的状态
            if (num === 0) {
                clearInterval(timer);//清理定时器
                btn.disabled = false;//恢复可以点击的状态
                btn.value = "点击发送验证码";//里面的文字也要恢复
                num = 5;//num也要恢复成5
            }
        }, 1000);
    };
</script>