• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序实现倒计时:解决ios倒计时失效(setInterval失效)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

在使用之前需要先在page页引入wxTimer.js文件(这里我将文件放在/utils)

let timer = require(\'../../utils/wxTimer.js\');

然后就可以使用啦

调用如下:

let wxTimer = new timer({
    expired_at: "2018-9-27 23:28:00.14756",
    complete: function () {
        console.log("完成了")
    },
    expired: function () {
        console.log("过期了(结束时间小于当前时间)")
    },
})
wxTimer.start(this);
wxTimer.stop();

封装方法中因为用到page页的data,因此需要在调用start()的时候传入 this

在data中添加timer对象

data:{
    timer: {
        remaining: \'00:00:00\'     }
}

在页面中就可以通过 timer.remaining 就可以显示倒计时

 

在调用wxTimer的时候,expired_at传入的值需要特别留意。

在小程序开发中,ios是个很头疼的事情,下面就“时间”来简单的说一下

  • 对于上面代码中提到的 2018-9-27 23:28:00.14756 

    • 在ios中是不支持‘-’的,应该替换为 \'/\'

    • 还有就是在ios中不支持 ‘.’ ,所以应该将\'.\'之后的数字去掉

   在方法中这些都已经实现了,如果想了解详细可以查看代码

参数说明:

  • expired_at:倒计时结束时间

  • complete:回调函数,倒计时结束后调用改方法

  • expired:回调函数,当传入的时间过期时调用该方法

 

 马云地址:https://gitee.com/WoRuoYiRuFeng/wx_smallProgram_countDown

 

附件(wxTimer.js)

 1 var wxTimer = function (initObj) {
 2     initObj = initObj || {};
 3     this.complete = initObj.complete;                    //结束任务(方法)
 4     this.expired = initObj.expired;                        //过期执行(方法)
 5 
 6     this.intervarID;                                    //计时ID
 7     this.expired_at = initObj.expired_at || "00:00:00";    //过期时间
 8 }
 9 
10 wxTimer.prototype = {
11     //开始
12     start: function (self) {
13         let that = this;
14         let expired_at = new Date(that.expired_at.replace(/-/g, "/")).getTime();
15         // expired_at = new Date(expired_at).getTime(); // ios下不执行,返回为null
16         let nowTime = new Date().getTime();
17         let remaining = (expired_at - nowTime); //计算剩余的毫秒数
18         // 过期
19         if (remaining < 0) {
20             if (that.expired) {
21                 that.expired();
22             }
23             return
24         }
25         function begin() {
26             // 过期
27             // if (remaining < 0) {
28             //     if (that.expired) {
29             //         that.expired();
30             //     }
31             //     that.stop();
32             // }else{
33 
34                 let hours = parseInt(remaining / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
35                 let minutes = parseInt(remaining / 1000 / 60 % 60, 10);//计算剩余的分钟
36                 let seconds = parseInt(remaining / 1000 % 60, 10);//计算剩余的秒数
37                 hours = checkTime(hours);
38                 minutes = checkTime(minutes);
39                 seconds = checkTime(seconds);
40                 // 结束任务
41                 if (hours <= 0 && minutes <= 0 && seconds <= 0) {
42                     if (that.complete) {
43                         that.complete();
44                     }
45                     that.stop();
46                 }
47                 if (hours >= 0 || minutes >= 0 || seconds >= 0) {
48                     self.setData({
49                         [\'timer.remaining\']: hours + ":" + minutes + ":" + seconds
50                     });
51                 }
52                 remaining = remaining - 1000;            
53             // }
54         }
55         function checkTime(timer){
56             if (timer < 10){
57                 timer = "0" + timer;
58             }
59             return timer;
60         }
61         // begin();
62         this.intervarID = setInterval(begin, 1000);
63     },
64     //结束
65     stop: function () {
66         clearInterval(this.intervarID);
67     }
68 }
69 
70 module.exports = wxTimer;

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之倒计时插件 wxTimer发布时间:2022-07-18
下一篇:
微信小程序资源整理发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap