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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
Angular路由简单学习
Dec 26 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
vuex 的简单使用
Mar 22 Javascript
微信小程序的mpvue框架快速上手指南
May 15 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
实用函数8
2007/11/08 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php微信开发之上传临时素材
2016/06/24 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
js+css实现打字效果
2020/06/24 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python dict的常用方法示例代码
2020/06/23 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
预备党员思想汇报范文
2014/01/11 职场文书
法律进学校实施方案
2014/03/15 职场文书
工商干部先进事迹
2014/05/14 职场文书
党员目标管理责任书
2014/07/25 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers