Vue写一个简单的倒计时按钮功能_vue.js_脚本之家

Vue写一个简单的倒计时按钮功能

 更新时间：2018年04月20日 10:58:30   作者：limingru   我要评论

这篇文章主要介绍了基于Vue写一个简单的倒计时按钮功能，在项目开发的过程，经常会遇到发送验证码，点击之后有60秒倒计时的按钮，今天小编就给大家分享实例代码，需要的朋友参考下吧

在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮，很常见却也很简单，但是在写这个按钮的时候有个别地方还要注意下，今天写出来，如有问题欢迎指正！

完成的效果如下：

 

为了更快显示出效果，我把时间设成了5秒。按钮在点击之后会出现倒计时，同时按钮变为不可点击状态，样式也发生变化，鼠标悬浮上的样子也会发生变化。

接下来我们用代码来实现：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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函数来解决这些问题。

?

1

2

3

4

5

6

7

8

9

10

11

12

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这个函数的代码不可执行，等到倒计时结束之后才可以再次执行。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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。这样刚才的问题就没有了。

 

到这里其实就差不多了，不过还可以调整下样式：

?

1

2

3

4

5

6

7

8

<button class=`"button" :class="{disabled: !this.canClick}"` `@click="countDown"`>

...

.disabled{

background-color: #ddd;

border-color: #ddd;

color:`#57a3f3;`

cursor: not-allowed; // 鼠标变化

}

效果：

 

这个倒计时按钮十分简单，但是我第一次写的时候还是写的很乱，而且那个时候还不知道函数节流的概念。

总结

以上所述是小编给大家介绍的Vue写一个简单的倒计时按钮功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

原文链接：https://juejin.im/post/5ad939526fb9a07aaf34c05f

Original url: Access
Created at: 2019-09-24 14:06:46
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论