Как создать javascript обратный отсчет?

Question

Я хочу создать javascript прямой отсчет времени. Почти как статистика сайта. введите описание изображения здесь

Я создал файл 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, ",");
}

EDIT

Если вы хотите сделать их в отдельные интервалы, то вы можете сделать что-то вроде

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

Вы, конечно, можете использовать свои собственные логи c Чтобы определить время, приведенный выше код является просто иллюстрацией.