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

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

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

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

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

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

来源

2012-11-16 FunnyFalcon

该链接上有实现说明。你跟着他们了吗？你遇到了什么错误？ – Abhilash

你正在寻找的是在''相关'ab的链接，看起来像'$（'＃until300s'）。countdown（{until：+300}）;' – Abhilash

是的。我做了什么指示链接。我包含了我的头标记中的链接，但我在setp 3上遇到了问题： “将倒计时功能连接到您的div” 请帮助我如何在我的html文件中实现基石插件。谢谢！ Abhilash :) – FunnyFalcon

将jQuery库包含在页面的头部分。
下载并在页面的头部添加jQuery Countdown CSS和JavaScript。或者，您可以使用最小化版本jquery.countdown.min.js（压缩时为13.5K vs 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>

希望这有助于！

来源

2012-11-16 09:24:28

如果你想使用该脚本那么你就必须按日期，而不是一个自定义的倒计时值才能算它没有得到重置刷新页面：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

来源

2012-11-16 09:32:35

当你刷新页面时，你也会重置它。我正在寻找如何保留你的计时器的时间。我有考试，并有一个下一个按钮，当用户点击下一个按钮时，它将引导用户到下一页，但时间应该是上一页的延续。我希望你能帮助我解决这个问题。谢谢！ :) – FunnyFalcon

为什么不把计时器放在页面的主体中，用'window.onbeforeunload = function（）{ return“你确定要退出这个考试吗？”; }脚本并为每个检查页使用“iframes标记”，这样主页将不会重新加载。 –

这是一个示例：http://fiddle.jshell.net/vGKJN/1/show/尝试关闭页面并尝试单击页面中的iframe链接并观看计时器。 –

如果您知道用户会启用本地缓存，并能够存储数据，你可以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); 
}

请注意，我就做了。然而片断计算器和其他在线的IDE都在抱怨安全漏洞。请注意，这是完全有效的，不会违反任何安全性。将其另存为.js并运行。

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

来源

2018-01-13 01:36:59 Zze

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

回答

相关问题