定时器在刷新时重置如何避免?

时间:2017-03-26 19:09:05

标签: javascript timer

这是我的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>

1 个答案:

答案 0 :(得分:2)

每当读取页面时,旧页面的整个上下文都会被销毁,并创建一个全新的上下文。您无法在下一页加载时运行一个页面加载计时器。

如果您需要将某个状态从一个页面加载保存到下一个页面然后在下一页中加载检查该状态并确定如何设置初始页面以匹配之前的状态,那么您可以保存状态在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函数。