andremouche,赣州建材网,武林琴箫录
在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮，很常见却也很简单，但是在写这个按钮的时候有个别地方还要注意下，今天写出来，如有问题欢迎指正！
完成的效果如下：
为了更快显示出效果，我把时间设成了5秒。按钮在点击之后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。
接下来我们用代码来实现：
我要评论
<button class="button" @click="countdown">
{{content}}
</button>
...
data () {
return {
content: '发送验证码', // 按钮里显示的内容
totaltime: 60 //记录具体倒计时时间
}
},
methods: {
countdown() {
let clock = window.setinterval(() => {
this.total--
this.content = this.total + 's后重新发送'
},1000)
}
}
在data里加了两条数据，一条用来记录时间，一条用来盛放倒计时按钮的具体内容。在countdown函数里我们用了setinterval定时器，每隔一秒totaltime减1，同时更改按钮里显示的内容。 在window.setinterval里用了箭头函数，因为它会自动绑定外面的this，所以就不用先存下this了。
效果如下图：
但是这个按钮还有一些问题：
点击了按钮之后过了1秒就直接从59秒开始倒计时了，中间的60不见了
倒计时的时候还可以点击
还没有清除倒计时
接下来需要继续完善countdown函数来解决这些问题。
countdown () {
this.content = this.totaltime + 's后重新发送' //这里解决60秒不见了的问题
let clock = window.setinterval(() => {
this.totaltime--
this.content = this.totaltime + 's后重新发送'
if (this.totaltime < 0) { //当倒计时小于0时清除定时器
window.clearinterval(clock)
this.content = '重新发送验证码'
this.totaltime = 60
}
},1000)
},
上面的代码解决了60不见的问题，同时当totaltime小于0时清除同时器、重新设置按钮里的content、将totaltime重置为60以便下次使用。
倒计10秒的效果：
发现bug，多次点击之后，倒讲时速度变快，这是因为每次点击都会启动一个setinterval，这些setinterval都会减少totaltime。解决的方法也很简单：简单节流一下就好了，就是第一次点击按钮之后让countdonw这个函数的代码不可执行，等到倒计时结束之后才可以再次执行。
data () {
return {
content: '发送验证码',
totaltime: 10,
canclick: true //添加canclick
}
}
...
countdown () {
if (!this.canclick) return //改动的是这两行代码
this.canclick = false
this.content = this.totaltime + 's后重新发送'
let clock = window.setinterval(() => {
this.totaltime--
this.content = this.totaltime + 's后重新发送'
if (this.totaltime < 0) {
window.clearinterval(clock)
this.content = '重新发送验证码'
this.totaltime = 10
this.canclick = true //这里重新开启
}
},1000)
}
在data里添加canclick，默认是true，如果canclick为true，countdown里的代码可以执行，如果是false就不行。每执行一次就将canclick设为false，而只在倒计时结束的时候再改为true。这样刚才的问题就没有了。
到这里其实就差不多了，不过还可以调整下样式：
<button class="button" :class="{disabled: !this.canclick}" @click="countdown">
...
.disabled{
background-color: #ddd;
border-color: #ddd;
color:#57a3f3;
cursor: not-allowed; // 鼠标变化
}
效果：
这个倒计时按钮十分简单，但是我第一次写的时候还是写的很乱，而且那个时候还不知道函数节流的概念。
总结
以上所述是小编给大家介绍的vue写一个简单的倒计时按钮功能，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论