先看效果圖吧

1、首先想要實現這個效果需要獲取到當前時間的時間戳

var timestamp = Date.parse(new Date());//獲取到毫秒

2、拿到後臺返回的活動結束的時間戳

3、計算兩者之間相差的天數、小時、分鐘、以及秒數

//計算兩個時間戳之間相差多少時間
function date(start_time, end_time) {
    var start_time = start_time;//開始時間
    var end_time = end_time;//結束時間
    var usedTime = end_time - start_time;  //兩個時間戳相差的毫秒數  
    var days = Math.floor(usedTime / (24 * 3600 * 1000));//相差的天數
    
    var leave1 = usedTime % (24 * 3600 * 1000);    //計算天數後剩餘的毫秒數  
    var hours = Math.floor(leave1 / (3600 * 1000));   //計算出小時數  
    
    var leave2 = leave1 % (3600 * 1000);        //計算小時數後剩餘的毫秒數  
    var minutes = Math.floor(leave2 / (60 * 1000));//計算相差分鐘數  
    
    var leave3 = leave2 % (60 * 1000); //計算分鐘後剩下的毫秒數
    var s = Math.floor(leave3 / 1000);   //計算相差秒數
    
    return { day: days, h: hours, minutes: minutes, s: s };
}
 

直接呼叫這個方法就可以，第一個引數是 當前時間戳 第二個時間是活動結束的時間戳

4、實現動態的效果

其實也很簡單，加一個定時器就可以了，但是有一點當前的時間戳要放在定時器裡面，不然不會動態改變。

我的結束時間 * 1000 是因為後臺給我返回的時間戳只到秒

setInterval(function () {
                var timestamp = new Date().getTime();
                _this.setData({
                    days: date(timestamp, endtime * 1000).day,
                    hours: date(timestamp, endtime * 1000).h,
                    minutes: date(timestamp, endtime * 1000).minutes,
                    s: date(timestamp, endtime * 1000).s
                })
            }, 1000)
 

我這個是渲染列表是小程式的寫法，不要直接複製，沒有效果的。小程式的可以。 

想要獲得更多資料的  請微信搜尋公眾號 【熱血科技】，關注一下即可。