我的轉發時間在頁面加載時得到重置

Question

最近，我爲我的購物網站實施了一個計時器，當他們創建訂單並且沒有用支付結算時，它設置24小時限制，以便櫃檯提醒他/她付款。我們表格中的計時器是開始時間，並由當前時間調整長達24小時 - 此後，訂單被取消。 現在我有一個問題，當我重新加載頁面從24小時計數器重啓這是我的代碼

<script type="text/javascript"> 
function startTimer(duration, display) { 
var start = '<?php echo $pending_order_date;?>'; 
function timer() { 
    // get the number of seconds that have elapsed since 
    // startTimer() was called 
    diff = duration - (((Date.now() - start)/1000) | 0); 
    // does the same job as parseInt truncates the float 
    minutes = (diff/60) | 0; 
    seconds = (diff % 60) | 0; 

    if(minutes >= 60){ 
     hours = (minutes/60) | 0; 
     minutes = (minutes % 60) | 0; 
    }else{ 
     hours = 0; 
    } 
    hours = hours < 10 ? "0" + hours : hours; 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
    seconds = seconds < 10 ? "0" + seconds : seconds; 

    display.textContent = hours + ":" + minutes + ":" + seconds; 

    if (diff <= 0) { 
     // add one second so that the count down starts at the full duration 
     // example 05:00 not 04:59 
     start = Date.now() + 1000; 
    } 
}; 
// we don't want to wait a full second before the timer starts 
timer(); 
setInterval(timer, 1000); 
} 

window.onload = function() { 
var twentyfourhour = 60 * 60 *24, 
    display = document.querySelector('#time'); 
startTimer(twentyfourhour, display); 
    }; 
</script> 

請看看我的代碼，我得到PHP中的時間戳從我的表和計數。 您的幫助，將不勝感激。

Answer 1

您需要將您的停留時間存儲在某處。 localStorage似乎更適合

function startTimer(duration, display) { 
    var start = '<?php echo $pending_order_date;?>'; 
    function timer() { 
     // get the number of seconds that have elapsed since 
     // startTimer() was called 
     diff = duration - (((Date.now() - start)/1000) | 0); 
     // does the same job as parseInt truncates the float 
     minutes = (diff/60) | 0; 
     seconds = (diff % 60) | 0; 

     if(minutes >= 60){ 
      hours = (minutes/60) | 0; 
      minutes = (minutes % 60) | 0; 
     }else{ 
      hours = 0; 
     } 
     hours = hours < 10 ? "0" + hours : hours; 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.textContent = hours + ":" + minutes + ":" + seconds; 

     if (diff <= 0) { 
      // add one second so that the count down starts at the full duration 
      // example 05:00 not 04:59 
      start = Date.now() + 1000; 
     } 
     localStorage.setItem('timer', diff); 
    }; 
    // we don't want to wait a full second before the timer starts 
    timer(); 
    setInterval(timer, 1000); 
} 

window.onload = function() { 
    var twentyfourhour = 60 * 60 *24, 
    display = document.querySelector('#time'); 
    var timePassed = localStorage.getItem('timer'); 
    startTimer((typeof timer!=='undefined' ? timer : twentyfourhour), display); 
    }; 

因此，每當您的持續時間發生變化時，它都會更新localStorage計時器值。當您重新加載頁面時，它會在localStorage中查找定時器項目，並將獲得該值，如果它不存在，則會使用24小時。您也可以添加一個控制器來刪除定時器過期後的定時器，並將其與定單號碼或其他東西一起存儲，以便您可以使用多個值。但這應該給你一個想法。