微信小程序倒计时功能实现代码


Posted in Javascript onNovember 09, 2017

倒计时功能是一个比较常见的功能,比如用户获取验证码就需要用到。这里记录一下在微信小程序里面倒计时功能的简单实现。

直接看看代码吧

//倒计时60秒
function countDown(that,count) {
 if (count == 0) {
 that.setData({
  timeCountDownTop: '获取验证码',
  counting:false
 })
 return;
 }
 that.setData({
 counting:true,
 timeCountDownTop: count + '秒后重新获取',
 })
 setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);
}

在需要倒计时的地方调用

Page({
 data:{
  counting:false
 },
 //生成验证码
 generateVerifyCode:function() {
  var that = this;
  if (!that.data.counting) {
   wx.showToast({
   title: '验证码已发送',
   })
   //开始倒计时60秒
   countDown(that, 60);
  } 
 },
})

下面简单介绍下功能的实现

首先倒计时的方法是写在Page的外面,这个别搞错了

实现倒计时关键的地方在于setTimeout方法,也即下面这段代码。setTimeout方法可以设置在指定的时间间隔执行某个函数。应用的格式是setTimeout(function(),time),function就是对应要执行的方法,time就是时间间隔,这里的1000表示1000毫秒,也就是间隔1秒执行一次countDown方法。

setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);
  • countDown方法中利用count字段来设置倒计时的时间,比如这里是60秒
  • countDown方法中把that也传递进去是为了在倒计时状态改变时利用setData方法更新页面
  • countDown方法中利用counting字段来判断是否已经在倒计时了,避免重复开始倒计时

倒计时结束是通过count来判断,通过return直接退出

总结

以上所述是小编给大家介绍的微信小程序倒计时功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
JS中type="button"和type="submit"的区别
Jul 04 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
微信小程序获取手机号授权用户登录功能
Nov 09 #Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 #Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 #Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 #Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
You might like
十天学会php之第十天
2006/10/09 PHP
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
详谈for循环里面的break和continue语句
2017/07/20 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
详解python3百度指数抓取实例
2016/12/12 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
2014的自我评价
2014/01/13 职场文书
法学专业自我鉴定
2014/02/05 职场文书
党员批评与自我批评
2014/02/12 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
幼儿园小班评语
2014/04/18 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
汉语拼音教学反思
2016/02/22 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python