亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信公眾號中如何實現倒計時的一個功能

發布時間:2021-03-12 09:36:02 來源:億速云 閱讀:2048 作者:小新 欄目:移動開發

小編給大家分享一下微信公眾號中如何實現倒計時的一個功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

代碼如下:

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);

以上是“微信公眾號中如何實現倒計時的一個功能”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

望都县| 汝南县| 平阳县| 治多县| 望谟县| 华安县| 靖边县| 阳江市| 滨海县| 禄丰县| 常熟市| 科技| 尚志市| 修文县| 台安县| 新丰县| 汉沽区| 黄山市| 芜湖市| 滨州市| 郯城县| 莱芜市| 延津县| 湖口县| 南平市| 丰镇市| 上杭县| 洪洞县| 千阳县| 都江堰市| 泉州市| 二连浩特市| 长兴县| 承德市| 合水县| 玉林市| 洞头县| 白银市| 高陵县| 松原市| 新源县|