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


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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python初学者常见错误详解
2019/07/02 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python可以用哪些数据库
2020/06/22 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
Python截图并保存的具体实例
2021/01/14 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
如何设置Java的运行环境
2013/04/05 面试题
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
竞聘上岗演讲
2014/05/19 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
岁月神偷观后感
2015/06/11 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫