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


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获取单选按钮的数据
Nov 27 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php实现复制移动文件的方法
2015/07/29 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
Python 自动补全(vim)
2014/11/30 Python
python中尾递归用法实例详解
2015/04/28 Python
Python实现随机选择元素功能
2017/09/14 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
浅析Python函数式编程
2018/10/06 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
大学生党课思想汇报
2013/12/29 职场文书
保护环境倡议书100字
2014/05/19 职场文书
会计岗位说明书
2014/07/29 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫