Question

我在网页上使用计时器。计时器是使用javascript代码构建的。函数startTimer（）在＆＃34; body onload＆＃34;上调用。因此，每次重新加载页面时，都会调用函数startTimer（）并重置计时器。我们怎能避免它？换句话说，有什么方法可以在第一次加载主体时调用函数。这是函数startTimer（）的代码。

<script type="text/javascript">
var running = false;
var endTime = null;
var timerID = null;
function startTimer() {
running = true;
now = new Date();
now = now.getTime();
// change last multiple for the number of minutes
endTime = now + (1000 * 60 * 140);
showCountDown();
}

    function showCountDown() {
    var now = new Date();
    now = now.getTime();

    if (endTime - now == 0) {
    //stopTimer();
    alert("Time is up.");
    document.form1.submit();

    } else {
    var delta = new Date(endTime - now);

    var theMin = delta.getMinutes();
    var theSec = delta.getSeconds();
    var theTime = theMin;
    if(theMin==59){alert("Time is up.");
    document.form1.submit();}
    theTime += ((theSec < 10) ? ":0" : ":") + theSec;
    document.form1.timerDisplay.value = theTime;
    if (running) {
    timerID = setTimeout("showCountDown()",1000);
    }
    }
    }
    function stopTimer() {
    clearTimeout(timerID);
    running = false;
    document.form1.timerDisplay.value = "0:00";

    }
    </script>

上述函数调用如下：

<body onload="startTimer();">

Answer 1

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

如果您需要将某个状态从一个页面加载保存到下一个页面然后在下一页中加载检查该状态并确定如何设置初始页面以匹配之前的状态，那么您可以保存状态在HTML5本地存储或cookie中的页面加载之间。

另一种可能性是不重新加载页面，而是使用ajax和javascript动态更新页面内容。这样你的现有计时器就会继续运行，因为根本就没有页面重新加载。

如果您正在尝试使用计时器显示在某些倒计时剩余的时间，您可以将倒计时零时间设置为HTML5本地存储，并且当重新加载的页面加载时，它可以检查设置的时间本地存储并启动倒数计时器以匹配先前设置的时间。

Answer 2

首先喜欢@jfriend00所说的，如果你通过javascript创建了计时器，每当重新加载页面时，它都会重新创建计时器。

如果您使用了cookie /本地存储，最终用户仍然可以删除它。

执行此功能的最佳方法是生成＆amp;存储服务器端的时间，在页面加载时将值传递给客户端，脚本将从服务器读取时间，然后启动倒计时。

Answer 3

使用cookie，或者如果使用HTML5，则使用本地/会话存储来保存状态。

刷新页面时，使用javascript构建的计时器会重置吗？怎么避免呢？

3 个答案: