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


    在使用之前需要先在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;
  • 相关阅读:
    小程序 canvas实现图片预览,图片保存
    MySQL实现排名并查询指定用户排名功能
    微信小程序canvas把正方形图片绘制成圆形
    WINDOW 安装ImageMagick服务端和PHP的imagick插件
    安装PHP扩展32位与64位的误区(x86与x64的查看)
    linux 安装 ImageMagick 和 imagick 扩展
    php 获取顶级域名
    php中通过Hashids将整数转化为唯一字符串
    yii2项目中运行composer 过程中遇到的问题
    yii2 mysql根据多个字段的数据计算排序
  • 原文地址:https://www.cnblogs.com/cap-rq/p/9716381.html
Copyright © 2020-2023  润新知