0

我在 html 文件中有多个段落，应该显示动态倒计时。所以我在javascript中做了一个倒计时函数，每次调用它都会返回剩余时间。不幸的是，我不知道如何在 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;
}
4

5 回答 5

1 
setInterval(function() {
    CountdownAnzeigen('2012-07-16 12:20:00');
}, 1000);
于 2012-07-11T19:00:43.057 回答
1

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

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

请参阅MDN setInterval 文档。

（另请参阅 setInterval 的姊妹方法setTimeout的文档。）

于 2012-07-11T19:04:14.240 回答
1

使用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-classed 元素的相关时间数据：

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

这将创建完全有效的 HTML5，并且在旧浏览器中仍然可以正常运行。

于 2012-07-11T19:58:47.133 回答
0

您也可以通过setTimeout()定期调用函数。

示例：

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>
于 2012-07-11T19:28:37.067 回答
0

除了所有答案如何使用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函数调用的新参数在哪里。

于 2012-07-11T19:29:17.800 回答