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


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之四(优雅的迭代)
Jun 20 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
node.js实现爬虫教程
Aug 25 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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
Home Coffee Roasting
2021/03/03 咖啡文化
php xml-rpc远程调用
2008/12/19 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
人工神经网络算法知识点总结
2019/06/11 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
年度考核自我鉴定
2013/11/09 职场文书
执行总经理岗位职责
2014/02/03 职场文书
企业年度评优方案
2014/06/02 职场文书
走进敬老院活动总结
2014/07/10 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书