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


Posted in Javascript onApril 20, 2018

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

完成的效果如下:

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

为了更快显示出效果,我把时间设成了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了。

效果如下图:

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

但是这个按钮还有一些问题:

点击了按钮之后过了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秒的效果:

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

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

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

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

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}

效果:

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

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

总结

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

Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 #Javascript
Vue中如何实现proxy代理
Apr 20 #Javascript
React diff算法的实现示例
Apr 20 #Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 #Javascript
node实现登录图片验证码的示例代码
Apr 20 #Javascript
vue项目中api接口管理总结
Apr 20 #Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
phpBB BBcode处理的漏洞
2006/10/09 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
php依赖注入知识点详解
2019/09/23 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python组合无重复三位数的实例
2018/11/13 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Python datetime模块的使用示例
2021/02/02 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
2014年公司植树节活动方案
2014/03/04 职场文书
美术专业自荐信
2014/07/07 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
卖车协议书范文
2016/03/23 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers