4

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

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

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

我希望有人能帮助我！谢谢！:)

我只需要显示小时、分钟和秒。并且在给定时间之后，会有一个提示框显示“时间到了！”。这是我们正在开发的在线考试。太感谢了！:)

4

3 回答 3

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);
}

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

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

于 2018-01-13T01:36:59.183 回答
0
  1. 在页面的 head 部分中包含 jQuery 库。
  2. 下载 jQuery Countdown CSS 和 JavaScript 并将其包含在页面的 head 部分。或者，您可以使用最小化版本 jquery.countdown.min.js（13.5K 与 31.4K，压缩时为 4.4K）。
  3. 将倒计时功能连接到您的 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>

希望这可以帮助！

于 2012-11-16T09:24:28.320 回答
0

如果您想使用该脚本，那么您必须按日期计数，而不是自定义倒计时值，以免在页面刷新时重置：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?";
}

我建议你看看这个带有 cookie 的倒计时计时器

于 2012-11-16T09:32:35.440 回答