这是我的Java脚本代码,它在刷新时会重置,如何避免这种情况
<script>
//define your time in second
var c=120;
var t;
timedCount();
function timedCount()
{
var hours = parseInt( c / 3600 ) % 24;
var minutes = parseInt( c / 60 ) % 60;
var seconds = c % 60;
var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.getElementById("timer").innerHTML=result;
if(c == 0 )
{
//setConfirmUnload(false);
//$("#quiz_form").submit();
window.location="result.php?td=$tid";
}
c = c - 1;
t = setTimeout(function()
{
timedCount()
},
1000);
}
</script>
最佳答案
每当重新加载页面时,旧页面的整个上下文都会被破坏,并且会创建一个全新的上下文。您无法让计时器在下一页加载时从一页加载开始运行。
如果您需要保存从一次页面加载到下一次页面的某种状态,然后在下一次页面加载中检查该状态,并确切地确定如何设置初始页面以匹配先前发生的情况,则可以在两次页面加载之间保存状态在HTML5本地存储或cookie中。
另一种可能性是不重新加载页面,而是使用ajax和javascript动态更新页面的内容。这样,您的现有计时器将继续运行,因为根本不会重新加载页面。
如果您要使用计时器做的只是显示某个倒计时还剩多少时间,则可以将倒数零时间设置为HTML5本地存储,当重新加载的页面加载时,它可以检查在本地存储中设置的时间,启动倒数计时器,使其与之前的时间相符。
使用cookie,如果使用HTML5,则使用本地/会话存储来保存状态。
的HTML
<a href="#" onclick="SaveTime()">Save Current Time</a> |
<a href="#" onclick="retrieveTime()">Retrieve Saved Time</a>
<div id="result"></div>
JAVASCRIPT
function SaveTime(){
var date = new Date();
var timeObj = { sec:date.getSeconds(), min:date.getMinutes(), hr:date.getHours() };
localStorage.setItem("timeObj", JSON.stringify(timeObj));
$('#result').append(JSON.stringify(timeObj)+' -- > Saved<br />' );
}
function retrieveTime(){
var timeObj = JSON.parse(localStorage.getItem("timeObj"));
//You have the time with you now
//You have the time with you now
$('#result').append(timeObj.hr+':'+timeObj.min+':'+timeObj.sec+' --> Retrieved<br />');
}
这只是一个基本的示例,可以在单击时将计时器保存在本地存储中。对其进行修改,并定期在计时器中调用javascript函数。