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


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中Math.random()使用详解
Apr 15 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
移动端效果之IndexList详解
Oct 20 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
vue实现购物车列表
Jun 30 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
表单提交验证类
2006/07/14 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python获取当前函数名称方法实例分享
2018/01/18 Python
python学生管理系统代码实现
2020/04/05 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python代码需要缩进吗
2020/07/01 Python
python selenium xpath定位操作
2020/09/01 Python
python 5个顶级异步框架推荐
2020/09/09 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
采购助理岗位职责
2014/02/16 职场文书
英语通知范文
2015/04/22 职场文书
礼仪培训心得体会
2016/01/22 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers