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


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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
JS如何判断json是否为空
Jul 06 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
Javasript设计模式之链式调用详解
Apr 26 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
了解JavaScript中let语句
May 30 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
Openlayers实现距离面积测量
Sep 28 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
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
Prototype Number对象 学习
2009/07/19 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
YUV转为jpg图像的实现
2019/12/09 Python
python 监控logcat关键字功能
2020/09/04 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
2014村务公开实施方案
2014/02/25 职场文书
质量保证书范本
2014/04/29 职场文书
先进党组织事迹材料
2014/12/26 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js