如何创建 javascript 倒计时？

Question

我想创建一个 javascript 实时倒计时。几乎就像统计网站一样。 enter image description here

我已经创建了 html 文件，但我不擅长 javascript 所以我需要你的帮助。

<table>
            <tbody><tr><td class="counter"><div id="cp1">7,795,022,199</div></td>
                <td class="data_name"><b>Current population</b></td></tr>
            <tr><td class="counter"><div id="cp2">3,931,870,264</div></td>
                <td class="data_name">Current male population <span id="cp4">(50.4%)</span></td></tr>
            <tr><td class="counter"><div id="cp3">3,863,151,936</div></td>
                <td class="data_name">Current female population <span id="cp5">(49.6%)</span></td></tr>
            <tr><td class="counter"><div id="cp6">52,128,438</div></td>
                <td class="data_name">Births year to date</td></tr>
            <tr><td class="counter"><div id="cp7">406,110</div></td>
                <td class="data_name">Births today</td></tr>
            <tr><td class="counter"><div id="cp8">20,311,076</div></td>
                <td class="data_name">Deaths year to date</td></tr>
            <tr><td class="counter"><div id="cp9">158,235</div></td>
                <td class="data_name">Deaths today</td></tr>
            <tr><td class="counter"><div id="cp10">0</div></td>
                <td class="data_name">Net migration year to date</td></tr>
            <tr><td class="counter"><div id="cp11">0</div></td>
                <td class="data_name">Net migration today</td></tr>
            <tr><td class="counter"><div id="cp12">31,817,362</div></td>
                <td class="data_name">Population growth year to date</td></tr>
            <tr><td class="counter"><div id="cp13">247,875</div></td>
                <td class="data_name">Population growth today</td></tr>
        </tbody></table>

我需要设置一个时间间隔，数字会自动统计。比如一秒钟。我怎样才能做到这一点？我想在我的 WordPress 博客中使用它。

Answer 1

假设您有 count function。在这种情况下，您可以使用

每秒执行一次 function

setInterval(count, 1000);

现在，您需要定义 count，如下所示：

function count() {
    var items = document.querySelectorAll(".counter > div");
    for (let item of items) item.innerText = (parseInt(item.innerText.replace(/,/g, '')) - 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

编辑

如果你想在不同的时间间隔进行，那么你可以做类似的事情

function count(item) {
    item.innerText = (parseInt(item.innerText.replace(/,/g, '')) - 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

然后

setInterval(function() {
    count(document.getElementById("cp1"));
}, 1000);

setInterval(function() {
    count(document.getElementById("cp2"));
}, 6000);

你当然可以使用自己的逻辑来定义时间，上面的代码只是一个例子。

如何创建 javascript 倒计时？

How to create javascript countdown?

javascript

wordpress

countdown