最近開發中遇到搶購倒計時和秒錶的功能，都跟時間相關，功能也差不多。想到以後開發中會經常用到這種小功能，故記錄分享一下。
小程序裏的搶購倒計時：
onLoad: function (options) {
this.countdown("2020-6-4 18:46:13"); //傳入限時的時間
},
countdown(time) {
const that = this;
var EndTime = new Date(time).getTime() ;
console.log("qianggou endtime" + EndTime);
var NowTime = new Date().getTime();
console.log("qianggou NowTime" + NowTime);
var total_micro_second = EndTime - NowTime;
if(total_micro_second < 0) {
this.data.qghour = 0;
this.data.qgminute = 0;
this.data.qgsecond = 0;
console.log("shouye qianggou finished:" + total_micro_second);
} else {
this.dateformat(total_micro_second);
console.log("shouye qianggou left time:" + total_micro_second);
}
this.setData({ //刷新頁面timestr
qghour: this.data.qghour,
qgminute: this.data.qgminute,
qgsecond: this.data.qgsecond
});
setTimeout(function() { // 每1秒中刷新一次
total_micro_second -= 1000;
that.countdown(time);
}, 1000)
},
dateformat(micro_second) {
// 總秒數
var second = Math.floor(micro_second / 1000);
// 天數
this.data.qgday = Math.floor(second / 3600 / 24);
// 小時
this.data.qghour = Math.floor(second / 3600 % 24);
// 分鐘
this.data.qgminute = Math.floor(second / 60 % 60);
// 秒
this.data.qgsecond = Math.floor(second % 60);
if (this.data.qgday < 10) {
this.data.qgday = '0' + this.data.qgday;
}
if (this.data.qghour < 10) {
this.data.qghour = '0' + this.data.qghour;
}
if (this.data.qgminute < 10) {
this.data.qgminute = '0' + this.data.qgminute;
}
if (this.data.qgsecond < 10) {
this.data.qgsecond = '0' + this.data.qgsecond;
}
},
快應用裏實現的秒錶：
startTimer() {
var d = new Date();
this.time = d.getTime();
this.seconds = 0;
this.minutes = 0;
this.hours = 0;
this.timer = setInterval(this.showTime.bind(this), 1000);
},
stopTimer() {
this.currentTime = '00 : 00 : 00';
clearInterval(this.timer);
},
showTime() {
var d = new Date();
var ctime = d.getTime();
this.seconds = Math.trunc(((ctime - this.time)/1000)%60);
this.minutes = Math.trunc(((ctime - this.time)/1000)/60%60);
this.hours = Math.trunc(((ctime - this.time)/1000)/3600);
var timestr = '';
if(this.hours == 0) {
timestr += '00 : ';
} else {
timestr += this.hours +' : ';
}
if(this.minutes < 10) {
timestr += '0';
}
timestr += this.minutes;
timestr += ' : ';
if(this.seconds < 10) {
timestr += '0';
}
timestr += this.seconds;
this.currentTime = timestr;
console.log('showtime:' + this.currentTime);
},
onReady() {
this.startTimer();
},
總結一：
兩段代碼中分別用到了Math.tranc() 和Math.foor(),得到結果其實一樣的，主要是由於這兩段代碼中傳入的參數都是正數，所以這裏取整的話兩個都可以用。
總結二：
快應用和小程序差不多，尤其是js部分。但快應用裏面的變量是實時刷新的，不用像小程序裏一樣需要不停調用setData 才能及時刷新。