0

我的结帐页面中有一个计时器，在第 1 步后我们有一个 2 步结帐，网页重新加载到第 2 步，因此计时器重新启动。我需要计时器继续

这是我的代码

这是 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>
4

1 回答 1

1

如果要将计时器的状态从一页加载到下一页保存，则必须将计时器信息专门存储在从一页到下一页持续存在的某个位置。Javascript 变量不会从一个页面加载保存到下一个页面 - 每次页面加载时它们都会从头开始重新初始化。

您的选择是：

  1. 服务器端：使用 ajax 将计时器状态保存到您的服务器，以便可以将其放入后续页面加载中。这很麻烦，因为除非您知道用户何时离开页面并且可以在那一刻可靠地将剩余时间保存到服务器，否则任何类型的计时器保存精度都需要对服务器进行大量 ajax 调用以不断节省时间.

  2. 客户端：通过 cookie 或（在较新的浏览器中）本地存储本地存储计时器状态。这很容易，但很容易被黑客操纵（如果你在乎的话）。

于 2013-04-09T01:53:57.547 回答