微信小程序实现验证码获取倒计时效果


Posted in Javascript onFebruary 08, 2018

本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下

微信小程序实现验证码获取倒计时效果

wxml

<button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode">
{{time}}
</button>

js

var interval = null //倒计时函数
Page({
 data: {
 date:'请选择日期',
 fun_id:2,
 time: '获取验证码', //倒计时 
 currentTime:61
 }, 
 getCode: function (options){
 var that = this;
 var currentTime = that.data.currentTime
 interval = setInterval(function () {
 currentTime--;
 that.setData({
 time: currentTime+'秒'
 })
 if (currentTime <= 0) {
 clearInterval(interval)
 that.setData({
  time: '重新发送',
  currentTime:61,
  disabled: false 
 })
 }
 }, 100) 
 },
 getVerificationCode(){
 this.getCode();
 var that = this
 that.setData({
 disabled:true
 })
 },

})

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

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

Javascript 相关文章推荐
js的一些常用方法小结
Jun 29 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 #Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 #Javascript
使用veloticy-ui生成文字动画效果
Feb 08 #Javascript
js中let和var定义变量的区别
Feb 08 #Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 #Javascript
You might like
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
详解Python编程中包的概念与管理
2015/10/16 Python
python 以16进制打印输出的方法
2018/07/09 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
护理专业应届毕业生推荐信
2013/11/15 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
大二自我鉴定
2014/01/31 职场文书
公司副总经理任命书
2014/06/05 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL