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

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

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

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

01

原生js实现

以下是原生简易js实现

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

如下是html代码

请认真阅读完协议

分析

实现这个示例,主要依赖于定时器,且倒计时的时间间隔必须是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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！