微信官方账号开发，一个实现倒计时的功能(纯代码)(微信微信官方账号动态倒计时定时器)

下面是自己写的一段代码。其功能是实现微信微信官方账号开发过程中的倒计时。效果如下。订单已提交。请在2分57秒内完成支付。纯代码分析。

开始的想法没有考虑到页面在后台的运行和锁屏等问题。代码如下:

let interval = setInterval(()= gt；{ let { staticTime } = this.statestatic time = static time -1；if(static time lt；= 0) { clearInterval(区间)；this.setState({提示: # 39；支付超时 # 39；，static time:0 })；返回；} let minutes = parse int(static time/60)；设秒= staticTime % 60让小费= # 39；订单已提交，请联系 # 39；+分钟+ # 39；积分 # 39；+秒+ # 39；几秒钟内完成支付 # 39；；this.setState({ tip:tip，static time:static time })；}, 1000);后来测试发现锁屏或者页面留在后台时计算错误，于是代码修改如下。let interval = setInterval(()= gt；{ let {backGroundTime，staticTime } = this.statethis . setstate({ background time:0 })；static time = static time -background time -1；if(static time lt；= 0) { clearInterval(区间)；this.setState({提示: # 39；支付超时 # 39；，staticTime:0，})；返回；} let minutes = parse int(static time/60)；设秒= staticTime % 60让小费= # 39；订单已提交，请联系 # 39；+分钟+ # 39；积分 # 39；+秒+ # 39；几秒钟内完成支付 # 39；；this.setState({ tip:tip，staticTime:staticTime，})；}, 1000);this . listenpageshowhidehandle()；//在后台计算页面的时间ListenPageShowHideHandle =()= >；{

让{ backGroundTime } = this.state让开始，结束；让自我=这个；document . addevent listener( ；可见性变化 ，function(){ if(document . visibility state = = # 39；隐藏 # 39；){ start =新日期()。getTime()；} else if(document . visibility state = = # 39；可见 # 39；){ end =新日期()。getTime()；background time = math . floor((end -start)/1000)；self . setstate({ background time })；console . log( # 39；时差: # 39；，background time)；} console . log(document . visibility state)；});}

转型之后，先下手为强的问题依然存在。原因是:当iphone使用settimeout()睡眠时，您不能继续运行JavaScript。当手机进入睡眠状态时，Safari会使用settimeout()终止任何正在运行的JavaScript进程。请在这里查看这个答案，了解这样做的一些原因。* *解决方案:* *订单生成时，我们把这个时间记为A，时间间隔为B(要求3分钟内付款，B为3*60*1000)，C为当前时间。我们使用setInterval每1秒读取一次时间。然后倒计时时间== A+B-C，代码如下:let interval = setinterval(()= >:{ let { order time，staticTime } = this.statelet now time = date . now()；let sub = math . floor((order time+static time -now time)/1000)；console . log( # 39；sub # 39，子)；if(sub lt；=0){ clearInterval(区间)；this.setState({提示: # 39；支付超时 # 39；，is false:true })；返回；} let minutes = parse int(sub/60)；让秒= sub % 60让小费= # 39；订单已提交，请联系 # 39；+分钟+ # 39；积分 # 39；+秒+ # 39；几秒钟内完成支付 # 39；；console.log(提示)；this.setState({ tip:tip，is false:false })；},1000);安装配置

相关文章:

微信官方账号授权设置，微信公众号授权

微信点击菜单打开登录微站的实现方法

相关视频:

传智和黑马微信公众平台开发视频教程以上是微信微信官方账号开发和倒计时的一个功能(纯代码)的详细内容。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 什么是骨架屏？
• 微信小程序开发中var that =this的基本用法
• 回想一下Android智能手机上的微信小程序白屏问题（手机上打开小程序时白屏）。
• 可以转发微信小程序给好友（微信小程序可以转发分享到朋友圈吗？）

本文由主机参考刊发，转载请注明：微信官方账号开发，一个实现倒计时的功能(纯代码)(微信微信官方账号动态倒计时定时器) https://zhujicankao.com/79774.html