Question

我正在尝试开发倒数计时器，该计时器在我的网页上显示不同位置的销售（所有div都是使用PHP管理的）。所有倒计时器都具有相同的id并且存在于同一页面内。

当我尝试使用id更新所有倒计时的内容时，它仅适用于第一个div。

<html>
<head> </head>
<body>
    <p id="countdown"></p>
    <p id="countdown"></p>
    <p id="countdown"></p>
    <p id="countdown"></p>
    <p id="countdown"></p>
    <p id="countdown"></p>

    <script>
        var end = new Date('03/24/2016 08:00 PM');

        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 + ' Hours ';
            document.getElementById('countdown').innerHTML += minutes + ' Mins ';
            document.getElementById('countdown').innerHTML += seconds + ' Secs';
        }
        timer = setInterval(showRemaining, 1000);
    </script>
</body>
</html>

Answer 1

ID必须是唯一的。您可以改用class。您可以使用document.getElementsByClassName按类名获取所有元素。之后，您可以使用Array.prototype.forEach迭代所有元素并设置innerHTML属性。

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

<script>
    var end = new Date('03/24/2016 08:00 PM');  

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

    function setAllCountdownInnerHtml(html) {
        var allElements = document.getElementsByClassName('countdown');
        Array.prototype.forEach.call(allElements, function(ele) {
            ele.innerHTML = html;
        });
    }

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

        if (distance < 0) {
            clearInterval(timer);
            setAllCountdownInnerHtml('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);

        var html = days + ' Days ' + hours + ' Hours ' + minutes + ' Mins ' + seconds + ' Secs';
        setAllCountdownInnerHtml(html);
     }

    timer = setInterval(showRemaining, 1000);
</script>

在此处查看演示https://jsfiddle.net/v3y4b3ux/

Answer 2

将您的ID重命名为唯一...

<p id="countdown1"></p>
<p id="countdown2"></p>
<p id="countdown3"></p>
<p id="countdown4"></p>
<p id="countdown5"></p>

然后使用for循环分别写入每个...

var time = days + ' Days ' + hours + ' Hours ' + minutes + ' Mins ' + seconds + ' Secs';
for(var i = 1; i < 6; i++){
  document.getElementById('countdown' + i).innerHTML = time;
}

无法更新具有相同ID

2 个答案: