[英]countdown timer using javascript should not restart on reload
我的结帐页面中有一个计时器,在步骤1之后,我们有一个两步的结帐,网页重新加载到步骤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"> 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>
如果要将计时器的状态从一页加载保存到下一页,则必须专门将计时器信息存储在从一页到下一页持续存在的位置。 Javascript变量不会从一个页面加载保存到下一个页面-每次页面加载时都会从头开始对其进行初始化。
您的选择是:
服务器端:使用ajax将计时器状态保存到您的服务器,以便可以将其放入后续页面加载中。 这很麻烦,因为除非您知道用户何时离开页面,并且可以在那一刻将剩余时间可靠地保存到服务器,否则任何类型的计时器保存精度都将需要对服务器进行多次ajax调用以不断节省时间。
客户端:通过Cookie或(在较新的浏览器中)本地存储在本地存储计时器状态。 这很容易,但是很容易被黑客操纵(如果您愿意的话)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.