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代码

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

分析

实现这个示例,主要依赖于定时器,且倒计时的时间间隔必须是1秒钟,另外还需要注意的是需要把握倒计时是否已经结束,如果结束的话,那么就需要回复按钮的可用状态

02

Vue版本实现

如下是Vue的实现,也就是上面示例展示的源代码

方式1-使用方法实现

上面这种使用方法去实现,是一种比较常见的方式

方式2-使用watch实现

使用watch同样可以达到同样的效果,可以不用创建方法，只需创建钩子,如下代码所示

总结

无论是使用原生js方式还是使用vue方式,都是可以实现的,都需要借助定时器功能去实现,在vue当中可以用普通方法的方式去实现,也可以使用

watch监听器的方式去实现,至于哪个更好,自己习惯使用那种,就用哪种,前者容易想到,而后者要略复杂一点

Js如何修改元素的属性值

2022-11-04

JS如何替换元素内容

2022-11-03

js如何实现随机数的切换

2022-11-02

网站服务器配置-应该选择多大带宽-同时能承载多少用户的访问

2022-11-01

点击下方“阅读原文”查看更多