Question

我在html文件中有多个段落，应该显示动态倒计时。所以我在javascript中创建了一个Countdown函数，每次调用它都会返回剩余的时间。不幸的是，我不知道如何在html文件中每秒调用此函数。你能帮帮我吗？

这是我的html文件的样子： 编辑，我的html文件中有很多倒计时段落！：

<p class="countdown"><script>document.write(CountdownAnzeigen('2012-07-16 12:20:00'));</script></p>
<p class="countdown"><script>document.write(CountdownAnzeigen('2012-08-10 10:10:00'));</script></p>
...

javascript函数如下所示：

function CountdownAnzeigen(end_datetime){
    var Now = new Date();
    var Countdown = Date.parse(end_datetime);
    var CountdownText = Countdown.getTime()-Now.getTime();
    return CountdownText;
}

Answer 1

setInterval(function() {
    CountdownAnzeigen('2012-07-16 12:20:00');
}, 1000);

Answer 2

setInterval(foobar, x)函数用于每foobar 毫秒运行一个函数x。

请注意，foobar可以是要运行的函数，也可以是一个将被解释为Javascript的字符串，但我相信它接受使用字符串方法是不好的做法。

请参阅MDN setInterval docs。

（另请参阅setInterval的姐妹方法setTimeout's documentation。）

Answer 3

使用data-属性将目标时间与每个元素相关联：

<p class="countdown" data-target-time="2012-07-06 12:20:00"></p>
<p class="countdown" data-target-time="2012-08-10 10:10:00"></p>

然后使用单个setInterval函数为每个countdown - 分类元素填充其相关时间数据的倒计时函数的结果：

setTimeout(function() {
    var countdowns = document.getElementsByClassName("countdown");
    for(var i=0; i < countdowns.length; ++i) {
        var cd = countdowns[i];
        cd.innerHTML = CountdownAnzeigen(cd.getAttribute("data-target-time"));
    }
}, 1000);

这会创建completely valid HTML5并在旧版浏览器中仍能正常运行。

Answer 4

您也可以通过setTimeout()定期呼叫功能。

Example：

JavaScript的

function CountdownAnzeigen(countdown){
    document.getElementById('countdown').innerHTML = countdown--;
    if (countdown>0) {
       window.setTimeout(function(){CountdownAnzeigen(countdown);}, 1000);
    } else { alert('The End');}
}

HTML

<input type="button" value="count down" onclick="CountdownAnzeigen(10)"/>
<div id="countdown"></div>

Answer 5

除了所有答案如何使用setInterval()，没有人解释，如何将结果放入段落。：）

再说一遍，叫你这样的功能：

setInterval(function() { CountdownAnzeigen('2012-07-16 12:20:00'); }, 1000);

并更新功能：

// remove return value
return CountdownText;

// and replace it with this
document.getElementById('countdown').innerHTML = CountdownText;

最后将您的HTML更改为：

<p class="countdown" id="countdown"></p>

如果您不使用任何“onload”处理程序，请将所有JavaScript放在段落下方并手动调用该函数，以便立即开始，而不是在一秒钟后第一次。

修改

如果您有多个段落，可以这样做：

<p class="countdown" id="countdown_1"></p>
<p class="countdown" id="countdown_2"></p>

<script>
    setInterval(function() { CountdownAnzeigen('countdown_1', '2012-07-16 12:20:00'); }, 1000)
    setInterval(function() { CountdownAnzeigen('countdown_2', '2012-07-16 12:20:00'); }, 500)
</script>

并将功能更新为：

document.getElementById(id).innerHTML = a;

其中ìd是函数调用的新参数。

如何在HTML中每秒调用一次javascript函数？

5 个答案:

修改