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

更新时间：2018年02月08日 13:54:07 作者：吴姝璇

这篇文章主要为大家详细介绍了微信小程序实现验证码获取倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码，供大家参考，具体内容如下

wxml

<button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode">
{{time}}
</button>

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
 })
 },

})

更多关于倒计时的文章请查看专题：《倒计时功能》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

layer弹出层 iframe层去掉滚动条的实例代码
今天小编就为大家分享一篇layer弹出层 iframe层去掉滚动条的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
ionic实现滑动的三种方式
这篇文章主要为大家详细介绍了ionic实现滑动的三种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
理解javascript定时器中的单线程
这篇文章主要帮助大家理解javascript定时器中的单线程，感兴趣的小伙伴们可以参考一下
2016-02-02
javascript:history.go()和History.back()的区别及应用
为提高用户体验度，可能会使用到刷新前进后退等相关更能，本文将以此问题详细介绍javascript:history.go()和History.back()的区别及应用，需要的朋友可以参考下
2012-11-11
js Dom实现换肤效果
这篇文章主要为大家详细介绍了js Dom实现换肤效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
基于openlayers4实现点的扩散效果
这篇文章主要为大家详细介绍了基于openlayers4实现点的扩散效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
js实现浏览器窗口大小被改变时触发事件的方法
这篇文章主要介绍了js实现浏览器窗口大小被改变时触发事件的方法,实例分析了window.onresize方法的使用技巧,需要的朋友可以参考下
2015-02-02
js刷新页面方法大全
本文介绍下，用js刷新当前页面的几种方法，包括reload方法、replace方法、自动刷新方法等。有需要的朋友参考下吧
2008-05-05
javascript抽象工厂模式详细说明
这篇文章主要介绍了javascript抽象工厂模式详细说明,需要的朋友可以参考下
2014-12-12
Nuxt配置Element-UI按需引入的操作方法
这篇文章主要介绍了Nuxt配置Element-UI按需引入方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07