简单实现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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
七个很有意思的PHP函数
May 12 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
jQuery获取radio选中项的值实例
2016/06/18 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
javascript实现导航栏分页效果
2019/06/27 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
Python设计密码强度校验程序
2020/07/30 Python
详解Python yaml模块
2020/09/23 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
护理专业优质毕业生自荐书
2014/01/31 职场文书
农村门前三包责任书
2014/07/25 职场文书
精神病医院见习报告
2014/11/03 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL