使用JavaScript的倒计时器不应重新启动

我在结帐页面有一个计时器，我们在step1之后有一个2步结帐，网页重新加载到第2步，因此计时器重新启动。我需要计时继续使用JavaScript的倒计时器不应重新启动

这里是我的代码

这是JavaScript的

<input type="hidden" id="dealCost" name="dealCost" value="${model.dealCost}"/> 
<script type="text/javascript"> 
    var dealCst = document.getElementById('dealCost').value; 

    if(dealCst < 53){ 
    zi_inceput1 = new Date(); 
    ceas_start1 = zi_inceput1.getTime(); 

    function initStopwatch1() { 
     var timp_pe_pag1 = new Date(); 
     return ((timp_pe_pag1.getTime() + (1000 * 0) - ceas_start1)/1000); 
    } 
    var tim = 1200; 
    function getSecs1() { 
     var tSecs1 = Math.round(initStopwatch1()); 
     if((tim-tSecs1)>=0) 
     { 
     var iSecs1 = (tim-tSecs1) % 60; 

     var iMins1 = Math.round((tSecs1 - 30)/60); 
     var iHour1 = Math.round((iMins1 - 30)/60); 
     var iMins1 = iMins1 % 60; 
     var min = Math.floor((tim-tSecs1)/60); 
     if(min<10){ 
     min = "0"+min; 
     } 
     var iHour1 = iHour1 % 24; 
     var sSecs1 = "" + ((iSecs1 > 9) ? iSecs1 : "0" + iSecs1); 
     var sMins1 = "" + ((iMins1 > 9) ? iMins1 : "0" + iMins1); 
     var sHour1 = "" + ((iHour1 > 9) ? iHour1 : "0" + iHour1); 
     document.getElementById('checkout_timer').innerHTML = min + ":" + sSecs1; 
     window.setTimeout('getSecs1()', 1000); 
    } 
    else{ 
     window.location.href="/deals"; 
    } 
    } 
    window.setTimeout('getSecs1()', 1000); 
    } 
</script>

这是HTML代码

<c:if test='${model.dealCost < 53}'> 
<div class="timer" style="float: right; width: 210px; font-size: 15px; margin-right: 20px;"> 
<div style="margin-top:20px;padding-bottom:5px;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);background: white;overflow:none;"> 
    <div class="otherheadercheckout"><div class="otherheadertextcheckout"><img src="/images/little_white_shopping_cart-19x19.png">&nbsp;Timer</div></div> 
    <p align="center">Time left to checkout</p> 
    <div align="center" style="font-weight:600;"> 
     <span id="checkout_timer"></span> 
    </div> 

</div> 

</div> 
</c:if>

来源

2013-04-09 prakash

如果你想保存定时器的状态从一个页面加载到下一个页面，那么你必须专门存储计时器信息，这个信息从一页到下一页保持不变。 JavaScript变量不会从一个页面加载保存到下一个页面 - 它们会在每次加载页面时从头开始重新初始化。

的选项有：

服务器端：使用AJAX定时器状态保存到服务器，因此它可以被放入随后的页面加载。这很麻烦，因为除非你知道当用户离开页面并且可以在此时将剩余时间可靠地保存到服务器，否则任何类型的定时器保存精度都需要大量Ajax调用服务器来不断节省时间。
客户端：通过cookie或（在较新的浏览器中）本地存储本地存储计时器状态。这很容易，但可以轻易地由黑客操纵（如果你在意的话）。

来源

2013-04-09 01:53:57 jfriend00

我可以有样品代码吗？ – prakash 2013-04-09 02:00:11

@prakash - 我们不会为您编写代码。如果你想要读取和写入cookies的代码，你可以在这里看到这个代码：http：//www.quirksmode.org/js/cookies.html（谷歌搜索可以找到供将来参考）。每10秒钟向cookie写入一次计时器状态，当计时器结束时清除cookie。然后，在加载页面时，检查cookie中是否存在计时器值 - 如果是，请从该值启动计时器。 – jfriend00 2013-04-09 02:05:39

我个人会选择使用cookies的localStorage shiv。一石二鸟。 – 2013-04-09 02:35:49

使用JavaScript的倒计时器不应重新启动

回答

相关问题