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


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判断两个日期是否相等的方法
Sep 10 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
jquery实现弹出层效果实例
2015/05/19 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
详解Django 时间与时区设置问题
2019/07/23 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
《小池塘》教学反思
2014/02/28 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
党员转正介绍人意见
2015/06/03 职场文书
教师岗位说明书
2015/09/30 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL