简单实现vue验证码60秒倒计时功能


Posted in Javascript onOctober 11, 2017

本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下

html

<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>

js

data(){
 return {
 show: true,
 count: '',
 timer: null,
 }
 },
 methods:{
 getCode(){
  const TIME_COUNT = 60;
  if (!this.timer) {
  this.count = TIME_COUNT;
  this.show = false;
  this.timer = setInterval(() => {
  if (this.count > 0 && this.count <= TIME_COUNT) {
   this.count--;
   } else {
   this.show = true;
   clearInterval(this.timer);
   this.timer = null;
   }
  }, 1000)
  }
 } 
 }

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

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

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

Javascript 相关文章推荐
js中parseInt函数浅谈
Jul 31 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
使用JS获取SessionStorage的值
Jan 12 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
mui框架移动开发初体验详解
Oct 11 #Javascript
Scala解析Json字符串的实例详解
Oct 11 #Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
详解vue mint-ui源码解析之loadmore组件
Oct 11 #Javascript
JS随机排序数组实现方法分析
Oct 11 #Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 #Javascript
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
You might like
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
php的socket编程详解
2016/11/20 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript引导程序
2008/10/26 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
python实现树形打印目录结构
2018/03/29 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python进行参数传递的方法
2020/05/12 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
Python远程linux执行命令实现
2020/11/11 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
公司备用金管理制度
2015/08/04 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python