vue获取验证码倒计时组件


Posted in Javascript onAugust 26, 2019

本文实例为大家分享了vue获取验证码倒计时组件,供大家参考,具体内容如下

之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。

vue获取验证码倒计时组件

<template>
 <div class="captcha-row">
 <input class="captcha-input" placeholder="输入验证码" auto-focus />
 <div v-if="showtime===null" class="captcha-button" @click="send">
  获取验证码
 </div>
 <div v-else class="captcha-button">
  {{showtime}}
 </div>
 </div>
</template>
<script>
export default {
 data() {
 return {
  // 计时器,注意需要进行销毁
  timeCounter: null,
  // null 则显示按钮 秒数则显示读秒
  showtime: null
 }
 },
 methods: {
 // 倒计时显示处理
 countDownText(s) {
  this.showtime = `${s}s后重新获取`
 },
 // 倒计时 60秒 不需要很精准
 countDown(times) {
  const self = this;
  // 时间间隔 1秒
  const interval = 1000;
  let count = 0;
  self.timeCounter = setTimeout(countDownStart, interval);
  function countDownStart() {
  if (self.timeCounter == null) {
   return false;
  }
  count++
  self.countDownText(times - count + 1);
  if (count > times) {
   clearTimeout(self.timeCounter)
   self.showtime = null;
  } else {
   self.timeCounter = setTimeout(countDownStart, interval)
  }
  }
 },
 send() {
  this.countDown(60);
 }
 },
}
</script>
<style lang="less" scoped>
.captcha-row {
 display: flex;
 .captcha-button {
 background: #048fff;
 color: white;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 4rpx 8rpx;
 width: 320rpx;
 border-radius: 4rpx;
 }
}
</style>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
seajs和requirejs模块化简单案例分析
Aug 26 #Javascript
JavaScript实现身份证验证代码实例
Aug 26 #Javascript
基于vue、react实现倒计时效果
Aug 26 #Javascript
tweenjs缓动算法的使用实例分析
Aug 26 #Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 #Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 #Javascript
小程序实现层叠卡片滑动效果
Aug 26 #Javascript
You might like
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
jQuery 名称冲突的解决方法
2011/04/08 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
python里glob模块知识点总结
2021/01/05 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
后勤岗位职责
2013/11/26 职场文书
英文推荐信格式范文
2014/05/09 职场文书
关于保护环境的标语
2014/06/09 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
单位介绍信格式
2015/01/31 职场文书
期末个人总结范文
2015/02/13 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书