最近公司項目需要做一個功能, 商品的倒計時功能,計時結束後商品不能購買。
廢話不多說,下面來講解一下我的解決思路怎麼寫。
服務端返回服務端的時間和商品的到期時間
“到期時間”和“服務端時間”變成時間戳然後相減得出當前的秒數,秒數再轉化爲天時分秒單位
最終效果圖:
wxml:
代碼:
Page({
data: {
//倒計時參數
timeCountDown:""
},
//計算返回倒計時時間
countDownTime: function (systemTime, stateTime){
//時間戳相減得到倒計時時間
//2018-11-19 16:07:55 服務端時間格式
let data_time1 = systemTime.substring(0, 4) + "-" + systemTime.substring(4, 6) + "-" + systemTime.substring(6, 8) + " " + systemTime.substring(8, 10) + ":" + systemTime.substring(10, 12) + ":" + systemTime.substring(12, 14);
//2018-11-30 16:07:55 到期時間格式
let data_time2 = stateTime.substring(0, 4) + "-" + stateTime.substring(4, 6) + "-" + stateTime.substring(6, 8) + " " + stateTime.substring(8, 10) + ":" + stateTime.substring(10, 12) + ":" + stateTime.substring(12, 14);
var date1 = new Date(data_time1);
var time1 = date1.getTime();
var date2 = new Date(data_time2);
var time2 = date2.getTime();
console.log("time1 = " +time1);
console.log("time2 = " + time2);
let timestamp = parseInt(time2, 10) - parseInt(time1,10);
this.countdown(timestamp);
},
//倒數時間顯示
countdown: function (timestamp){
let totalSecond = timestamp / 1000; //總秒數
let second = totalSecond;
// 天數位
var that = this;
var day = Math.floor(second / 3600 / 24);
var dayStr = day.toString();
if (dayStr.length == 1) dayStr = '0' + dayStr;
// 小時位
var hr = Math.floor((second - day * 3600 * 24) / 3600);
var hrStr = hr.toString();
if (hrStr.length == 1) hrStr = '0' + hrStr;
// 分鐘位
var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
var minStr = min.toString();
if (minStr.length == 1) minStr = '0' + minStr;
// 秒位
var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
var secStr = sec.toString();
// timeCountDown
let timeStr = dayStr + "天" + hrStr + "時" + minStr + "分" + secStr + "秒";
that.setData({
timeCountDown: timeStr
});
// console.log(timeStr);
setTimeout(function () {
timestamp -= 1000;
that.countdown(timestamp);
}, 1000)
},
})
setTimeout的方法後面設置1000意思爲一秒後執行,這裏使用遞歸的方式實現時間的刷新。
本期教程到此結束,如果有什麼問題可以留言,作者看到了會盡快回復