简单实现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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
xml和web特殊字符
Apr 28 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python定时器线程池原理详解
2020/02/26 Python
flask项目集成swagger的方法
2020/12/09 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
什么是数据抽象
2016/11/26 面试题
高中生校园生活自我评价
2013/09/19 职场文书
工作自我评价怎么写
2014/01/29 职场文书
主管竞聘书范文
2014/03/31 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
多媒体教室标语
2014/06/26 职场文书
个人整改方案范文
2014/10/25 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
小学副班长竞选稿
2015/11/21 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android