微信小程序倒计时功能 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序倒计时功能

发表时间:2022-9-6

发布人:葵宇科技

浏览次数:412

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

直接看看代码吧

  1. //倒计时60秒
  2. function countDown(that,count) {
  3. if (count == 0) {
  4. that.setData({
  5. timeCountDownTop: '获取验证码',
  6. counting:false
  7. })
  8. return;
  9. }
  10. that.setData({
  11. counting:true,
  12. timeCountDownTop: count + '秒后重新获取',
  13. })
  14. setTimeout(function(){
  15. count--;
  16. countDown(that, count);
  17. }, 1000);
  18. }

在需要倒计时的地方调用

  1. Page({
  2. data:{
  3. counting:false
  4. },
  5. //生成验证码
  6. generateVerifyCode:function() {
  7. var that = this;
  8. if (!that.data.counting) {
  9. wx.showToast({
  10. title: '验证码已发送',
  11. })
  12. //开始倒计时60秒
  13. countDown(that, 60);
  14. }
  15. },
  16. })

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

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

  1. setTimeout(function(){
  2. count--;
  3. countDown(that, count);
  4. }, 1000);

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

倒计时结束是通过count来判断,通过return直接退出 
以上就是微信小程序里面倒计时功能的简单实现啦,希望对大家有用!


相关案例查看更多