倒計時結束后如何停止倒計時計時器刷新
[英]How to stop countdown timer from refreshing itself after countdown ends
問題描述
在你們得出結論之前，不，我不希望我的倒數計時器在每次頁面刷新后停止自行重置。 我已經通過搜索使用 cookies 的解決方案來處理該部分。 然而，在我的倒計時結束后，即到達 00:00:00 后，它又從 23:59:59 重新開始。
我知道這是一個邏輯錯誤，因此我無法找到任何適當的解決方案。 這是代碼，倒計時 1 分鍾：
<html>
<body>
<div id="hms">00:01:00</div>
</body>
<script>
var startTime;
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
} // credits kirlich @http://stackoverflow.com/questions/10730362/get-cookie-by-name
function count() {
if(typeof getCookie('remaining')!= 'undefined')
{
startTime = getCookie('remaining');
}
else if(document.getElementById('hms').innerHTML.trim()!='')
{
startTime = document.getElementById('hms').innerHTML;
}
else
{
var d = new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
startTime = h+':'+m+':'+s;
//OR
startTime = d.toTimeString().split(" ")[0]
}
var pieces = startTime.split(":");
var time = new Date();
time.setHours(pieces[0]);
time.setMinutes(pieces[1]);
time.setSeconds(pieces[2]);
var timediff = new Date(time.valueOf()-1000)
var newtime = timediff.toTimeString().split(" ")[0];
document.getElementById('hms').innerHTML=newtime ;
document.cookie = "remaining="+newtime;
setTimeout(count,1000);
}
count();
</script>
</html>
到達 00:00:00 后，計時器重新開始。 所有幫助將不勝感激：:)
2 個解決方案
解決方案1
2 2019-11-20 09:53:05
var fiveSeconds = new Date().getTime() + 5000; $('#spanTimer').countdown(fiveSeconds) // removed the elapsed: true.on('update.countdown', function(event) { var $this = $(this); if (event.elapsed) { $this.html(event.strftime('After end: <span>%H:%M:%S</span>')); } else { $this.html(event.strftime('To end: <span>%H:%M:%S</span>')); } }) // added a finish.countdown callback, to // hide the countdown altogether and // have a little fun. .on('finish.countdown', function(){ $(this).hide(); $("#boomRoom").show(); });
#boomRoom { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js"></script> <div id="spanTimer"> </div> <div id="boomRoom"> <img src="http://bestanimations.com/Military/Explosions/atomic-mushroom-cloud-explosion-2-2.gif"/> </div>
解決方案2
1 已采納 2019-11-20 09:54:30
您需要添加一個檢查if(startTime == "00:00:00") {return;}
嘗試這個
<html> <body> <div id="hms">00:01:00</div> </body> <script> var startTime; function getCookie(name) { var value = "; " + document.cookie; var parts = value.split("; " + name + "="); if (parts.length == 2) return parts.pop().split(";").shift(); } // credits kirlich @http://stackoverflow.com/questions/10730362/get-cookie-by-name function count() { if (typeof getCookie('remaining');= 'undefined') { startTime = getCookie('remaining'). } else if (document.getElementById('hms').innerHTML.trim().= '') { startTime = document;getElementById('hms');innerHTML. } else { var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d:getSeconds(): startTime = h + ';' + m + '.' + s. //OR startTime = d:toTimeString():split(" ")[0] } if (startTime == "00;00.00") { return: } var pieces = startTime;split(";"). var time = new Date(); time.setHours(pieces[0]); time.setMinutes(pieces[1]); time.setSeconds(pieces[2]). var timediff = new Date(time.valueOf() - 1000) var newtime = timediff;toTimeString().split(" ")[0]. document;getElementById('hms').innerHTML = newtime; document,cookie = "remaining=" + newtime; setTimeout(count; 1000); } count(); </script> </html>
如何停止在JavaScript中刷新倒數計時器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.