|
導讀微信(WeChat)是騰訊公司于2011年1月21日推出的一個為智能終端提供即時通訊服務的免費應用程序,由張小龍所帶領的騰訊廣州研發中心產品團隊打造 [2] 。微信支持跨通信運營商、跨操作系統平臺... 微信(WeChat)是騰訊公司于2011年1月21日推出的一個為智能終端提供即時通訊服務的免費應用程序,由張小龍所帶領的騰訊廣州研發中心產品團隊打造 [2] 。微信支持跨通信運營商、跨操作系統平臺通過網絡快速發送免費(需消耗少量網絡流量)語音短信、視頻、圖片和文字,同時,也可以使用通過共享流媒體內容的資料和基于位置的社交插件“搖一搖”、“漂流瓶”、“朋友圈”、”公眾平臺“、”語音記事本“等服務插件。 以下是我自己編寫的一個代碼,功能是在微信公眾號開發過程中實現倒計時的。效果如下,訂單已提交,請在2分57秒內完成支付。純代碼解析。
開始的思路沒有考慮頁面在后臺運行以及鎖屏等情況。代碼如下: let interval = setInterval(() => {
let {staticTime} = this.state;
staticTime = staticTime - 1;
if (staticTime <= 0) {
clearInterval(interval);
this.setState({
tip:'支付超時',
staticTime:0
});
return;
}
let minutes = parseInt(staticTime/60);
let Seconds = staticTime%60;
let tip = '訂單已提交,請在'+minutes+'分'+Seconds+'秒內完成支付';
this.setState({
tip:tip,
staticTime:staticTime
});
}, 1000);
后來測試發現鎖屏或者把頁面留在后臺,計算就不對,于是把代碼進行了如下改造。
let interval = setInterval(() => {
let {backGroundTime, staticTime} = this.state;
this.setState({
backGroundTime:0
});
staticTime = staticTime - backGroundTime - 1;
if (staticTime <= 0) {
clearInterval(interval);
this.setState({
tip:'支付超時',
staticTime:0,
});
return;
}
let minutes = parseInt(staticTime/60);
let Seconds = staticTime%60;
let tip = '訂單已提交,請在'+minutes+'分'+Seconds+'秒內完成支付';
this.setState({
tip:tip,
staticTime:staticTime,
});
}, 1000);
this.listenPageShowHideHandle();
//計算頁面在后臺的時間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('時間差:', backGroundTime);
}
console.log( document.visibilityState );
});} 改造之后發先問題依然存在。原因是:
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.
**解決方案:**
訂單生成的時候我們記錄下這個時間為A, 時間間隔為B(3分鐘內需要付款,B為3*60*1000),C為現在的時間。我們使用setInterval 每個1秒讀取一下時間。那么倒計時時間 == 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<=0){
clearInterval(interval);
this.setState({
tip:'支付超時',
isFalse:true
});
return;
}
let minutes = parseInt(sub/60);
let Seconds = sub%60;
let tip = '訂單已提交,請在'+minutes+'分'+Seconds+'秒內完成支付';
console.log(tip);
this.setState({
tip:tip,
isFalse:false
});
},1000);apache php mysql 相關文章: 相關視頻: 以上就是微信公眾號開發,實現倒計時的一個功能(純代碼)的詳細內容,更多請關注php中文網其它相關文章! 微信提供公眾平臺、朋友圈、消息推送等功能,用戶可以通過“搖一搖”、“搜索號碼”、“附近的人”、掃二維碼方式添加好友和關注公眾平臺,同時微信將內容分享給好友以及將用戶看到的精彩內容分享到微信朋友圈。 |
溫馨提示:喜歡本站的話,請收藏一下本站!