倒數計時器在刷新頁面時不會重置？

我需要一個定時器的代碼，即使刷新頁面也不會重置倒計時器。倒數計時器在刷新頁面時不會重置？

我看到基斯木插頭的示例代碼，但不知道如何在我的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

倒數計時器在刷新頁面時不會重置？

回答

相關問題