JS如何实现一个注册按钮10秒倒计时效果

我们平时在逛到一些网站的时候,在一些网站的会员注册页面里,为了提高用户的责任心

以及给用户留下足够的时间阅读完注册协议,可以采用10秒倒计时的方式,阅读完协议后,才可以单机注册按钮的特效

其实这与发送短信验证码倒计时,是一样的

01

原生js实现

以下是原生简易js实现

var sec = 10;
function countDownTimer() {
    timer = setInterval(function() {
        // 获取注册按钮的DOM
        var btn = document.getElementById("btn");
        sec--;
        btn.value = `注册(${sec})`;
        if(sec == 0) {
            clearInterval(timer);  // 清除定时器
            btn.disabled = false;  // 按钮恢复可用
            btn.value = '注册';    // 设置按钮文本
        }
    },1000)
}
countDownTimer();

如下是html代码

<p>请认真阅读完协议</p>
<input type="button" value="注册(10)" id="btn" disabled="disabled" />

分析

实现