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


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 url传值中文乱码之解决之道
Nov 20 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
vue引入Excel表格插件的方法
Apr 28 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
php更新mysql后获取改变行数的方法
2014/12/25 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
php多进程应用场景实例详解
2019/07/22 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
yy司仪主持词
2014/03/22 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
医院感染管理制度
2015/08/05 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
如何用JavaScipt测网速
2021/05/09 Javascript
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python