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 13 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
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
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php实现的生成排列算法示例
2019/07/25 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
js中的string.format函数代码
2020/08/11 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
一名女生的自荐信
2013/12/08 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
管理失职检讨书
2014/02/12 职场文书
美容院经理岗位职责
2014/04/03 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
2014年质量工作总结
2014/11/22 职场文书
北京英语导游词
2015/02/12 职场文书
2015教师年度考核评语
2015/03/25 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python