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


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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
爱情检讨书大全
2014/01/21 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
团代会邀请函
2015/02/02 职场文书
2015年纪委工作总结
2015/05/13 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python