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 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
TS 类型收窄教程示例详解
Sep 23 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如何将日志写进syslog
2013/06/28 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
js中有关IE版本检测
2012/01/04 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python全栈知识点总结
2019/07/01 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
小学三年级学生评语
2014/04/22 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
太行山上观后感
2015/06/05 职场文书
体育教师研修感悟
2015/11/18 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技