小程序實現倒計時：解決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）

var wxTimer = function (initObj) {
    initObj = initObj || {};
    this.complete = initObj.complete;                    //結束任務（方法）
    this.expired = initObj.expired;                        //過期執行（方法）

    this.intervarID;                                    //計時ID
    this.expired_at = initObj.expired_at || "00:00:00";    //過期時間
}

wxTimer.prototype = {
    //開始
    start: function (self) {
        let that = this;
        let expired_at = new Date(that.expired_at.replace(/-/g, "/")).getTime();
        // expired_at = new Date(expired_at).getTime(); // ios下不執行,返回為null
        let nowTime = new Date().getTime();
        let remaining = (expired_at - nowTime); //計算剩余的毫秒數
        // 過期
        if (remaining < 0) {
            if (that.expired) {
                that.expired();
            }
            return
        }
        function begin() {
            // 過期
            // if (remaining < 0) {
            //     if (that.expired) {
            //         that.expired();
            //     }
            //     that.stop();
            // }else{

                let hours = parseInt(remaining / 1000 / 60 / 60 % 24, 10); //計算剩余的小時
                let minutes = parseInt(remaining / 1000 / 60 % 60, 10);//計算剩余的分鍾
                let seconds = parseInt(remaining / 1000 % 60, 10);//計算剩余的秒數
                hours = checkTime(hours);
                minutes = checkTime(minutes);
                seconds = checkTime(seconds);
                // 結束任務
                if (hours <= 0 && minutes <= 0 && seconds <= 0) {
                    if (that.complete) {
                        that.complete();
                    }
                    that.stop();
                }
                if (hours >= 0 || minutes >= 0 || seconds >= 0) {
                    self.setData({
                        ['timer.remaining']: hours + ":" + minutes + ":" + seconds
                    });
                }
                remaining = remaining - 1000;            
            // }
        }
        function checkTime(timer){
            if (timer < 10){
                timer = "0" + timer;
            }
            return timer;
        }
        // begin();
        this.intervarID = setInterval(begin, 1000);
    },
    //結束
    stop: function () {
        clearInterval(this.intervarID);
    }
}

module.exports = wxTimer;