微信公众号开发，实现倒计时的一个功能（纯代码）

以下是我自己编写的一个代码，功能是在微信公众号开发过程中实现倒计时的。
效果如下，订单已提交，请在2分57秒内完成支付。
纯代码解析。
开始的思路没有考虑页面在后台运行以及锁屏等情况。
代码如下：
let interval = setInterval(() => {
let {
staticTime}
= this.state;
staticTime = staticTime - 1;
if (staticTime 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 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 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中文网其它相关文章！
微信
分享相关标签：
iphone android javascript本文原创发布php中文网，转载请注明出处，感谢您的尊重！
上一篇：
微信小游戏基于微信开发工具入门讲解
下一篇：
怎么创建微信公众号自定义菜单栏？这里给出了权威解答相关文章相关视频修改微信号有什么影响吗？微信中共享实时位置什么意思数据库设计的基本原则是什么？微信小程序调用图片安全API微信公众号开发，实现倒计时的一个功能（纯代码）2015年最新Android基础入门教程目录使用Eclipse + ADT + SDK开发Android APP使用Android Studio开发Android APPAndroid程序签名打包Android网络编程要学的东西与Http协议学习 [温州做微信公众号]