微信小程序中利用時間選擇器和js無計算實現定時器（將字符串或秒數轉換成倒計時）

轉載注明出處

改成了一個單獨的js文件，並且修改成了插件，點擊這里查看

今天寫小程序，有一個需求就是用戶選擇時間，然后我這邊就要開始倒計時。

因為小程序的限制，所以直接選用時間選擇器作為選擇定時器的小時和分鍾。唯一的缺點就是不能選擇秒。

一開始的想法是選擇的到一個字符串以后，截取字符串轉換成數字然后和以前一樣不停的計算。什么計算秒數，換算成分數啊之類的

想想雖然不難但還是太麻煩了。就想有沒有簡單易懂的實現方法。

首先想到的就是js中的Date()

因為這個函數可以傳字符串獲取毫秒數，傳毫秒數獲取字符串。那么總體上來看，應該是可行的。

思路：

首先我們的需求是，用戶需要通過時間選擇器一個時間，這個時間選擇器傳出來的就是一個類似"12:25"這樣的字符串，前面是小時，后面是分鍾，我們需要把這個字符串轉換成秒數才好進行倒計時。

因為前面已經提到了Date函數，那么我們需要的是將這個字符串轉換成毫秒數。所以，我們將字符串拼接，並得到毫秒數：

var endTime = new Date("1970/01/01 "+time+":00");

其中的time就是我們的時間選擇器傳出來的字符串了。

前面的年月日你隨便設置就行，這個無所謂，反正后面是要被截掉的。

得到毫秒數以后我們就要開始倒計時啦。

這時我們需要開啟一個定時器，這個定時器里面有什么內容呢？最為關鍵的就是利用Date函數來獲取日期。（這不吃飽了撐的么，剛換算成秒數，你又要換算成日期？？？excuse me？？？別急，繼續往下看）

然后需要一個count，setInterval每執行一次，就+1，聰明的同學應該到這里就清楚我們該怎么做了。

沒錯，請看：

var count = 0;
setInterval(function(){ var time = new Date(endTime.getTime()-1000*count++); time = time.toString().substr(16,8); },1000);

 

但是，這里有個問題就是時間到0了以后沒有停止。那怎么辦呢。這個時候我們的程序就要稍微改一下了。

var count = 0;
var intervarID = setInterval(function(){
　　var time = new Date(endTime.getTime()-1000*count++);
　　time = time.toString().substr(15,9);

　　if(that.data.time == "00:00:00"){
　　　　clearInterval(intervarID);
　　}

},1000);

這樣，我們就完美的實現了一個定時器啦。

下面上小程序部分的代碼：

 // 頁面初始化 options為頁面跳轉所帶來的參數
    var endTime = new Date("2011/01/01 "+options.time+":00");
    //初始化定時器
    this.setData({
        time:options.time+":00"
    });
    //開始倒計時
    var that=this;
    var count = 0;
    this.data.intervarID = setInterval(function(){
        console.log(that.data.time + " " + count);
        var time = new Date(endTime.getTime()-1000*count++);
        that.setData({
            count:count+1,
            time:time.toString().substr(16,8)
        });
        if(that.data.time == "00:00:00"){
            clearInterval(that.data.intervarID);
        }
    },1000);

 最后需要注意的是：

• 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中

• 在 Android 上，小程序的 javascript 代碼是通過 X5 內核來解析

• 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中

這ios和開發工具的內核在Date()  函數的輸入上有一定的差別。開發工具上的支持2011-11-11這種格式，但是ios的不支持，所以就采用2011/11/11這種格式來書寫代碼（安卓未進行測試）

好了，最后，我承認我是個標題黨，其實我還是計算了兩下的。