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


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 相关文章推荐
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 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
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
发布你的Python模块详解
2016/09/15 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
Python sys模块常用方法解析
2020/02/20 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
自我鉴定怎么写
2013/12/05 职场文书
元旦晚会策划方案
2014/02/18 职场文书
一分钟演讲稿
2014/04/30 职场文书
企业诚信承诺书
2014/05/23 职场文书
2015年植树节活动总结
2015/02/06 职场文书
小学班主任自我评价
2015/03/11 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL