刷新页面时倒数计时器不会重置？答案

【问题标题】：Countdown Timer that doesn't reset when you refresh the page?刷新页面时倒数计时器不会重置？
【发布时间】：2012-11-16 07:24:01
【问题描述】：

我需要一个计时器代码，即使您刷新页面也不会重置倒数计时器。

我在 keith wood plug in 看到了示例代码，但不知道如何在我的 html 文件中实现它。 这是链接：

http://keith-wood.name/countdown.html

我希望有人可以帮助我！谢谢！ :)

我只需要显示小时、分钟和秒。并且在 Time given 之后，会有一个提示框显示 "Time is up!" 。这是我们正在开发的在线考试。太感谢了！ :)

【问题讨论】：

那个链接有实现说明。你关注过他们吗？你遇到了什么错误？
您在该链接上的relative ab 中查找的内容类似于$('#until300s').countdown({until: +300});
是的。我做了那个链接的指示。我在我的 head 标签中包含了链接，但是我在 setp 3 上遇到了问题，即：“将倒计时功能连接到您的 div”请帮助了解如何在我的 html 文件中实现 keith wood 插件。谢谢！阿比拉什 :)
我已经下载了 CSS 和 javascript 文件。到目前为止，我的 hhtml 文件包含：
您可能需要使用cookies来存储问题的结束日期（您第一次访问该页面的时间+一定的时间）。请记住，javascript 根本不安全，任何人都可能在考试中“作弊”。例如，您可以在 php 中添加额外的验证以防止这种情况发生。

标签： javascript jquery html css

【解决方案1】：

如果您知道用户将启用本地缓存并能够存储数据，您可以将 2 个值保存到 localStorage，1 个用于currentTime，1 个用于targetTime。然后你在一个区间比较 2，如果是currentTime > targetTime，显示你的信息。

还绑定到onbeforeunload 事件并将新的currentTime 保存回localStorage。这将为您提供您正在寻找的持续倒计时。

下面是一个示例，说明如何做到这一点：

var interval;
let minutes = 1;
let currentTime = localStorage.getItem('currentTime');
let targetTime = localStorage.getItem('targetTime');
if (targetTime == null && currentTime == null) {
  currentTime = new Date();
  targetTime = new Date(currentTime.getTime() + (minutes * 60000));
  localStorage.setItem('currentTime', currentTime);
  localStorage.setItem('targetTime', targetTime);
}
else{
  currentTime = new Date(currentTime);
  targetTime = new Date(targetTime);
}

if(!checkComplete()){
  interval = setInterval(checkComplete, 1000);
}

function checkComplete() {
  if (currentTime > targetTime) {
    clearInterval(interval);
    alert("Time is up");
  } else {
    currentTime = new Date();
    document.write(
     "\n <font color=\"white\"> Seconds Remaining:" + ((targetTime - currentTime) / 1000) + "</font>");
  }
}

document.onbeforeunload = function(){
  localStorage.setItem('currentTime', currentTime);
}

请注意，我会创建一个 sn-p 但是 stackoverflow 和其他在线 IDE 抱怨安全漏洞。请注意，这是完全有效的，并且不会违反任何安全性。将其保存为.js 并运行。

要再次开始“倒计时”，请调用localStorage.clear()。

【讨论】：

【解决方案2】：

在页面的 head 部分中包含 jQuery 库。
下载 jQuery Countdown CSS 和 JavaScript 并将其包含在页面的 head 部分。或者，您可以使用最小化版本 jquery.countdown.min.js（13.5K 与 31.4K，压缩后为 4.4K）。
将倒计时功能连接到您的 div。

因此，您的最终代码将是：

<html>
<head>
    <title>jQuery Countdown</title>
    <style type="text/css">@import "jquery.countdown.css";</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.countdown.js"></script>
    <script type="text/javascript">
        $(function () {
        var year = new Date();
        year = new Date(year.getFullYear(), 11 - 1, 20);
        $('#dvCountDown').countdown({until: year, format: 'HMS'});
            $('#year').text(austDay.getFullYear());
        });
    </script>
</head>
<body>
<h1>jQuery Countdown Basics</h1>
<p>Counting down to 20 November <span id="year">2012</span>.</p>
<div id="dvCountDown"></div>

</body>
</html>

希望这会有所帮助！

【讨论】：

【解决方案3】：

如果您想使用该脚本，那么您必须按日期计数，而不是自定义倒计时值，以免在页面刷新时重置：http://jsfiddle.net/qWERa/1/

//Custom countdown value starting on page load
$('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,});

//Countdown by Date
$('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,});

//Time is up dialog!
function liftOff() {
    alert('Time is up!');
}

完整代码：

<html>
<head>
<title>Demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script> 
<script type='text/javascript' src='http://keith-wood.name/js/jquery.countdown.js'></script>
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.countdown.css">
<script type='text/javascript'> 
$(window).load(function(){
//Starts from time of page load
$('#CountdownbyValue').countdown({until: '+0h +0m +8s', format: 'HMS',onExpiry: liftOff,});

//Counts by Date
$('#CountdownbyDate').countdown({until: new Date(2012, 11-1, 17, 10, 10, 10), format: 'HMS',onExpiry: liftOff,});

//Time is up!
function liftOff() { 
    alert('Time is up!'); 
} 
});
</script>
</head>
<body>
<div id="CountdownbyValue"></div>
<div id="CountdownbyDate"></div>
</body>
</html>

你也可以试试：

window.onbeforeunload = function() {
    return "Are you sure you want to quit this exam?";
}

我建议你看看这个Countdown timer with cookies

【讨论】：

刷新页面时也会重置。我正在研究如何在您的计时器中保留时间。我有考试，有一个下一步按钮，当用户单击下一步时，它将引导用户到下一页，但时间应该是上一页的延续。我希望你能帮助我解决这个问题。谢谢！ :)
为什么不将计时器放在带有window.onbeforeunload = function() { return "Are you sure you want to quit this exam?"; } 脚本的页面主体中，并为每个考试页面使用iframes tag，这样主页就不会重新加载。跨度>
这是一个示例：fiddle.jshell.net/vGKJN/1/show 尝试关闭页面并尝试单击页面中的 iframe 链接并观看计时器。