javascript Javascript刷新+倒计时文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16532577/
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
Javascript refresh + countdown text
提问by David Garcia
I am using the following javascript in the header to refresh the page
我在标题中使用以下 javascript 来刷新页面
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>
and in the body tag
并在正文标签中
<body onload="JavaScript:timedRefresh(5000);">
My question is how do I add a text showing the countdown to refresh the page
我的问题是如何添加显示倒计时的文本以刷新页面
x seconds to refresh
x 秒刷新
回答by Paul
回答by flavian
function timedRefresh(timeoutPeriod) {
var timer = setInterval(function() {
if (timeoutPeriod > 0) {
timeoutPeriod -= 1;
document.body.innerHTML = timeoutPeriod + ".." + "<br />";
// or
document.getElementById("countdown").innerHTML = timeoutPeriod + ".." + "<br />";
} else {
clearInterval(timer);
window.location.href = window.location.href;
};
}, 1000);
};
timedRefresh(10);
I don't really see why you would use setTimeoutfor this purpose.
我真的不明白你为什么要setTimeout用于这个目的。
回答by cassidymack
I know this question has been already answered some time ago, but I was looking for similar code but with a longer (minutes) interval. It didn't come up in searches I did so this is what I came up with and thought I'd share:
我知道这个问题已经在一段时间前得到了回答，但我正在寻找类似的代码，但间隔更长（分钟）。它没有出现在我的搜索中，所以这就是我想出的，并认为我会分享：
Javascript
Javascript
function checklength(i) {
'use strict';
if (i < 10) {
i = "0" + i;
}
return i;
}
var minutes, seconds, count, counter, timer;
count = 601; //seconds
counter = setInterval(timer, 1000);
function timer() {
'use strict';
count = count - 1;
minutes = checklength(Math.floor(count / 60));
seconds = checklength(count - minutes * 60);
if (count < 0) {
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML = 'Next refresh in ' + minutes + ':' + seconds + ' ';
if (count === 0) {
location.reload();
}
}
HTML
HTML
<span id="timer"></span>
回答by Kenneth
You'd have to run the timeout every second, update the DOM and only reload when you need to:
您必须每秒运行一次超时，更新 DOM 并仅在需要时重新加载：
<script type="text/JavaScript">
<!--
var i = 5000;
function timedRefresh(timeoutPeriod) {
i = timeoutPeriod;
updateDom();
}
// -->
function updateDom(){
body.innerHTML = i;
i--;
if (i==0){
location.reload(true);
}
else{
setTimeout(updateDom, 1000);
}
}
// -->
</script>
回答by MZA
Because my page did not refresh within a second (in dev) I slightly modified answer of Paul to:
因为我的页面没有在一秒钟内刷新（在开发中）我稍微修改了 Paul 的答案：
(function countdown(remaining) {
if(remaining === 0)
location.reload(true);
if(remaining > 0)
document.getElementById('countdown').innerHTML = remaining;
setTimeout(function(){ countdown(remaining - 1); }, 1000);
})(30); // 30 seconds
What was happening was that the counter was issuing new GETs every second and the page never got a change to load. The extra test solved that.
发生的事情是计数器每秒都在发出新的 GET 请求，而页面从未加载过任何更改。额外的测试解决了这个问题。
