javascript 刷新浏览器时如何使倒数计时器不重置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22099714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make countdown timer not reset when refresh the browser?
提问by mango23
When i refresh the browser, the timer resets, so how to make it not reset? This is my code. Please check it.
当我刷新浏览器时，计时器会重置，那么如何使其不重置？这是我的代码。请检查一下。
<?php echo $waktune; ?> // You can change it into seconds
var detik = <?php echo $waktune; ?>;
if (document.images) {
parselimit = detik
}
function begintimer() {
if (!document.images)
return
if (parselimit < 12) {
document.getElementById("servertime").style.color = "Green";
}
if (parselimit == 1) {
document.getElementById("hasil").submit();
} else {
parselimit -= 1 curmin = Math.floor(parselimit / 60)
cursec = parselimit % 60
if (curmin != 0)
curtime = curmin + ":" + cursec + ""else
curtime = cursec + " detik"document.getElementById("servertime").innerHTML = curtime setTimeout("begintimer()", 1000)
}
}
回答by R3tep
Try to use session storage :
尝试使用会话存储：
// Store
sessionStorage.setItem("key", "value");
// Retrieve
document.getElementById("result").innerHTML=sessionStorage.getItem("key");
Update
更新
Example :
例子 ：
<head>
</head>
<body>
<div id="divCounter"></div>
<script type="text/javascript">
if (sessionStorage.getItem("counter")) {
if (sessionStorage.getItem("counter") >= 10) {
var value = 0;
} else {
var value = sessionStorage.getItem("counter");
}
} else {
var value = 0;
}
document.getElementById('divCounter').innerHTML = value;
var counter = function () {
if (value >= 10) {
sessionStorage.setItem("counter", 0);
value = 0;
} else {
value = parseInt(value) + 1;
sessionStorage.setItem("counter", value);
}
document.getElementById('divCounter').innerHTML = value;
};
var interval = setInterval(counter, 1000);
</script>
</body>
回答by MueR
回答by SirDeveloper
I think you have to save some value in the cookie and reset timer only if timer > x && cookie is already been setted.
我认为你必须在 cookie 中保存一些值，并且只有在 timer > x && cookie 已经被设置时才重置定时器。
Set cookie on init:
在 init 上设置 cookie：
setcookie("reloaded","true");
Set cookie on reaload:
在重新加载时设置 cookie：
setcookie("reloaded","false");
Check:
查看：
if($_COOKIE["reloaded"] == false && timer > $time) {
/* reset timer */
}
回答by Serge K.
You can use local storage, such as :
您可以使用本地存储，例如：
localStorage.setItem('countDownValue', curtime); // To set the value
...
curtime = localStorage.getItem('countDownValue'); // To get the value
回答by Chandresh
<form name="counter">
<input type="text" size="8" name="chandresh" id="counter">
</form>
<script type="text/javascript">
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var cnt = 60;
function counter(){
if(getCookie("cnt") > 0){
cnt = getCookie("cnt");
}
cnt -= 1;
document.cookie = "cnt="+ cnt;
jQuery("#counter").val(getCookie("cnt"));
if(cnt>0){
setTimeout(counter,1000);
}
}
counter();
</script>
Source: http://chandreshrana.blogspot.in/2017/01/how-to-make-counter-not-reset-on-page.html
来源：http: //chandreshrana.blogspot.in/2017/01/how-to-make-counter-not-reset-on-page.html
回答by superup
How to create a countdown timer with JavaScript.
如何使用 JavaScript 创建倒数计时器。
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
Hope for help.
希望得到帮助。
