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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
PR值查询 | PageRank 查询
2006/12/20 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
用JS实现的一个include函数
2007/07/21 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
优质服务口号
2014/06/11 职场文书
员工自我工作评价
2015/03/06 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
工作时间证明
2015/06/15 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
Python中requests库的用法详解
2022/06/05 Python