以下是我自己編寫的一個(gè)代碼，功能是在微信公眾號(hào)開發(fā)過(guò)程中實(shí)現(xiàn)倒計(jì)時(shí)的。
效果如下，訂單已提交，請(qǐng)?jiān)?分57秒內(nèi)完成支付。
純代碼解析。
開始的思路沒有考慮頁(yè)面在后臺(tái)運(yùn)行以及鎖屏等情況。
代碼如下：
let interval = setInterval(() => {
let {
staticTime}
= this.state;
staticTime = staticTime - 1;
if (staticTime clearInterval(interval);
this.setState({
tip:'
支付超時(shí)'
, staticTime:0 }
);
return;
}
let minutes = parseInt(staticTime/60);
let Seconds = staticTime%60;
let tip = '
訂單已提交，請(qǐng)?jiān)?
+minutes+'
分'
+Seconds+'
秒內(nèi)完成支付'
;
this.setState({
tip:tip, staticTime:staticTime }
);
}
, 1000);
后來(lái)測(cè)試發(fā)現(xiàn)鎖屏或者把頁(yè)面留在后臺(tái)，計(jì)算就不對(duì)，于是把代碼進(jìn)行了如下改造。
let interval = setInterval(() => {
let {
backGroundTime, staticTime}
= this.state;
this.setState({
backGroundTime:0 }
);
staticTime = staticTime - backGroundTime - 1;
if (staticTime clearInterval(interval);
this.setState({
tip:'
支付超時(shí)'
, staticTime:0, }
);
return;
}
let minutes = parseInt(staticTime/60);
let Seconds = staticTime%60;
let tip = '
訂單已提交，請(qǐng)?jiān)?
+minutes+'
分'
+Seconds+'
秒內(nèi)完成支付'
;
this.setState({
tip:tip, staticTime:staticTime, }
);
}
, 1000);
this.listenPageShowHideHandle();
//計(jì)算頁(yè)面在后臺(tái)的時(shí)間listenPageShowHideHandle = () =>{
let {
backGroundTime}
= this.state;
let start, end;
let self = this;
document.addEventListener("visibilitychange", function() {
if(document.visibilityState == '
hidden'
){
start = new Date().getTime();
}
else if(document.visibilityState == '
visible'
){
end = new Date().getTime();
backGroundTime = Math.floor((end - start)/1000);
self.setState({
backGroundTime}
);
console.log('
時(shí)間差：
'
, backGroundTime);
}
console.log( document.visibilityState );
}
);
}
改造之后發(fā)先問(wèn)題依然存在。
原因是：
You cannot continue to run javascript while the iPhone is sleeping using setTimeout(), however.When the phone is put to sleep, Safari will kill any running javascript processes using setTimeout(). Check out this answer here for some reasons why this is done. **解決方案：
** 訂單生成的時(shí)候我們記錄下這個(gè)時(shí)間為A， 時(shí)間間隔為B（3分鐘內(nèi)需要付款，B為3*60*1000），C為現(xiàn)在的時(shí)間。
我們使用setInterval 每個(gè)1秒讀取一下時(shí)間。
那么倒計(jì)時(shí)時(shí)間 == A+B-C，代碼如下 let interval = setInterval(()=>{
let {
orderTime, staticTime}
= this.state;
let nowTime = Date.now();
let sub = Math.floor((orderTime + staticTime - nowTime)/1000);
console.log('
sub'
,sub);
if(sub clearInterval(interval);
this.setState({
tip:'
支付超時(shí)'
, isFalse:true }
);
return;
}
let minutes = parseInt(sub/60);
let Seconds = sub%60;
let tip = '
訂單已提交，請(qǐng)?jiān)?
+minutes+'
分'
+Seconds+'
秒內(nèi)完成支付'
;
console.log(tip);
this.setState({
tip:tip, isFalse:false }
);
}
,1000);
apache php mysql相關(guān)文章：
微信公眾號(hào)授權(quán)設(shè)置，微信公眾授權(quán)微信公眾號(hào)點(diǎn)擊菜單即可打開并登錄微站的實(shí)現(xiàn)方法相關(guān)視頻：
傳智、黑馬微信公眾平臺(tái)開發(fā)視頻教程以上就是微信公眾號(hào)開發(fā)，實(shí)現(xiàn)倒計(jì)時(shí)的一個(gè)功能（純代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
iphone android javascript本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！
上一篇：
微信小游戲基于微信開發(fā)工具入門講解
下一篇：
怎么創(chuàng)建微信公眾號(hào)自定義菜單欄？這里給出了權(quán)威解答相關(guān)文章相關(guān)視頻修改微信號(hào)有什么影響嗎？微信中共享實(shí)時(shí)位置什么意思數(shù)據(jù)庫(kù)設(shè)計(jì)的基本原則是什么？微信小程序調(diào)用圖片安全API微信公眾號(hào)開發(fā)，實(shí)現(xiàn)倒計(jì)時(shí)的一個(gè)功能（純代碼）2015年最新Android基礎(chǔ)入門教程目錄使用Eclipse + ADT + SDK開發(fā)Android APP使用Android Studio開發(fā)Android APPAndroid程序簽名打包Android網(wǎng)絡(luò)編程要學(xué)的東西與Http協(xié)議學(xué)習(xí) [溫州做微信公眾號(hào)]