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


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 相关文章推荐
javascript事件模型代码
Jul 01 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
JS class语法糖的深入剖析
Jul 07 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PHP _construct()函数讲解
2019/02/03 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python对url格式解析的方法
2015/05/13 Python
深入浅析python定时杀进程
2016/06/06 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
从0开始的Python学习016异常
2019/04/08 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
工商管理专业学生的自我评价
2013/10/01 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
个人简历自我评价范文
2014/02/04 职场文书
综治工作心得体会
2014/09/11 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers