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


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 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python中super函数的用法
2017/11/17 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python内置数据类型之列表操作
2018/11/12 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
名人演讲稿范文
2014/09/16 职场文书
2014年部门工作总结
2014/11/12 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫