Javascript刷新+倒计时文字答案

【问题标题】：Javascript refresh + countdown textJavascript刷新+倒计时文字
【发布时间】：2013-05-13 23:04:33
【问题描述】：

我在标题中使用以下 javascript 来刷新页面

    <script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>

在body标签中

<body onload="JavaScript:timedRefresh(5000);">

我的问题是如何添加显示倒计时的文本以刷新页面

x 秒刷新

【问题讨论】：

你试过什么？在网上搜索“javascript倒计时”，例子太多了……

标签： javascript

【解决方案1】：

这符合您的需要吗？

(function countdown(remaining) {
    if(remaining <= 0)
        location.reload(true);
    document.getElementById('countdown').innerHTML = remaining;
    setTimeout(function(){ countdown(remaining - 1); }, 1000);
})(5); // 5 seconds

JSFiddle

【讨论】：

这似乎在小提琴中起作用，但是当我将它添加到我的页面时，它甚至不显示文本也不刷新，
@JoseDavidGarciaLlanos 您需要在您的页面中添加一个 ID 为“倒计时”的 HTML 元素，以便将剩余时间写入其中。如果您想将其写入不同的元素，您当然可以修改 Javascript。
@JoseDavidGarciaLlanos 查看小提琴 HTML 部分中的 div
我在body中添加了div元素
@JoseDavidGarciaLlanos 该脚本还必须位于 HTML 中的该 div 之后，以便脚本启动时该 div 存在。您可以将其立即放在脚本标签中，例如<div id="countdown"></div><script>...

【解决方案2】：

Working fiddle

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);

我真的不明白您为什么要为此使用setTimeout。

【讨论】：

几乎可以，但是它在开始倒计时时隐藏了页面的内容，看看uelhub.com/fingerprinting
在我看来，这似乎是一个比一遍又一遍地重新加载更好的解决方案。
非常感谢。对于没有让它工作的人，请确保您注意到代码中的 // 或位。

【解决方案3】：

我知道这个问题已经回答了一段时间，但我正在寻找类似的代码，但间隔更长（分钟）。它没有出现在我所做的搜索中，所以这是我想出的并想分享的：

Working fiddle

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

<span id="timer"></span>

【讨论】：

为我工作。谢谢！

【解决方案4】：

您必须每秒运行一次超时，更新 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>

【讨论】：

【解决方案5】：

因为我的页面没有在一秒钟内刷新（在开发中），所以我稍微修改了 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

发生的事情是计数器每秒都发出新的 GET 请求，而页面从未加载任何更改。额外的测试解决了这个问题。

【讨论】：