我的转发时间在页面加载时得到重置

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小时。您也可以添加一个控制器来删除定时器过期后的定时器，并将其与定单号码或其他东西一起存储，以便您可以使用多个值。但这应该给你一个想法。