Question

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

我在基思木插件中看到了示例代码，但我不知道如何在我的 html文件中实现此功能。 这是链接：

我希望有人可以帮助我！谢谢！：）

我只需要小时，分钟和秒来展示。在给出时间之后，会出现一个提示框，显示＆＃34;时间到了！＆＃34; 。这个是我们正在开发的在线考试。非常感谢！：）

Answer 1

如果您知道用户将启用本地缓存并能够存储数据，则可以将2个值保存到localStorage，将currentTime保存为1，将targetTime保存为1。然后比较一个间隔中的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);
}

请注意，我会制作一个片段，但stackoverflow和其他在线IDE正在抱怨安全漏洞。请注意，这完全有效，并且不会破坏任何安全性。将其另存为.js并运行。

启动＆＃34;倒计时＆＃34;再次，调用localStorage.clear()。

Answer 2

在页面的head部分包含jQuery库。
在页面的head部分下载并包含jQuery Countdown CSS和JavaScript。或者，您可以使用最小化版本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>

希望这有帮助！

Answer 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

刷新页面时不会重置的倒计时计时器？

3 个答案: