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


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 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 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
轻松修复Discuz!数据库
2008/05/03 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
PHP strripos函数用法总结
2019/02/11 PHP
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
常见python正则用法的简单实例
2016/06/21 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python中正则表达式与模式匹配
2019/05/07 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
为什么会有内存对齐
2016/10/10 面试题
毕业学生推荐信
2013/12/01 职场文书
《自选商场》教学反思
2014/02/14 职场文书
工伤调解协议书
2016/03/21 职场文书
golang为什么要统一错误处理
2022/04/03 Golang