微信公眾號開發，實現倒數計時的一個功能（純程式碼）

以下是我自己寫的一個程式碼，功能是在微信公眾號開發過程中實現倒數計時的。效果如下，訂單已提交，請在2分57秒內完成付款。純程式碼解析。

開始的想法並沒有考慮頁面在背景運作以及鎖定畫面等情況。程式碼如下：

let interval = setInterval(() => {
            let {staticTime} = this.state;
            staticTime = staticTime - 1;
            if (staticTime <= 0) {
                clearInterval(interval);
                this.setState({
                    tip:&#39;支付超时&#39;,
                    staticTime:0
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = &#39;订单已提交，请在&#39;+minutes+&#39;分&#39;+Seconds+&#39;秒内完成支付&#39;;
            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:&#39;支付超时&#39;,
                    staticTime:0,
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = &#39;订单已提交，请在&#39;+minutes+&#39;分&#39;+Seconds+&#39;秒内完成支付&#39;;
            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:&#39;支付超时&#39;,
                isFalse:true
            });
            return;
        }
        let minutes = parseInt(sub/60);
        let Seconds = sub%60;
        let tip = &#39;订单已提交，请在&#39;+minutes+&#39;分&#39;+Seconds+&#39;秒内完成支付&#39;;
        console.log(tip);
        this.setState({
            tip:tip,
            isFalse:false
        });
    },1000);

apache php mysql

相關文章：

微信公眾號授權設置，微信公眾授權

微信公眾號點擊選單即可開啟並登入微站的實作方法

#相關影片：

傳智、黑馬微信公眾平台開發影片教學

#

以上是微信公眾號開發，實現倒數計時的一個功能（純程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！