HTML 中的 JS 倒计时

Question

对于一个网站，我需要一个特定日期的倒计时。我尝试在Javascript中自己写了这样一段代码，但是失败了。所以我搜索了一个模板。我在 Stack Overflow 上找到了一个，效果非常好。但我有一个问题。我需要分别格式化天、小时、分钟和秒。在我找到的代码中，所有内容都由 Javascript 写入一个单一的 div。所以我希望 Javascript 分别编辑所有 4 个 div（天、小时、分钟、秒）。有人可以帮我吗？

<script>
    var end = new Date('07/16/2017 00:00 AM');

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById('countdown').innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById('countdown').innerHTML = days + 'days ';
            document.getElementById('countdown').innerHTML += hours + 'hrs ';
            document.getElementById('countdown').innerHTML += minutes + 'mins ';
            document.getElementById('countdown').innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    </script>
    <div id="countdown">

        <div id="days"></div>
        <div id="hrs"></div>
        <div id="mins"></div>
        <div id="secs"></div>

    </div>

Answer 1

您只需更改：

document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';

为所有人提供 正确的 div ID 而不是 countdown 并将 .innerHTML += 更改为 .innerHTML =

<script>
    var end = new Date('07/16/2017 00:00 AM');

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById('countdown').innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById('days').innerHTML = days + 'days ';
            document.getElementById('hrs').innerHTML = hours + 'hrs ';
            document.getElementById('mins').innerHTML = minutes + 'mins ';
            document.getElementById('secs').innerHTML = seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    </script>
    <div id="countdown">

        <div id="days"></div>
        <div id="hrs"></div>
        <div id="mins"></div>
        <div id="secs"></div>

    </div>

Answer 2

希望能帮到你！

link 运行在线：https://jsbin.com/sivejolapi/edit?html,output

<script>
    var end = new Date('07/16/2017 00:00 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('days').innerHTML = days + 'days ';
        document.getElementById('hrs').innerHTML = hours + 'hrs ';
        document.getElementById('mins').innerHTML = minutes + 'mins ';
        document.getElementById('secs').innerHTML = seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div class="countdown">

    <div id="days"></div>
    <div id="hrs"></div>
    <div id="mins"></div>
    <div id="secs"></div>

</div>

`

HTML 中的 JS 倒计时

JS countdown in HTML

javascript

html

css

timer

countdown