javascript - 同一时刻只有一个定时器在工作(html+js)

Question

我有一个计时器，我希望它位于我网站的两个不同位置。但当时只有一个在工作。

这是脚本+下面的第一个计时器。

 <script>
    var interval;
    var minutes = 8;
    var seconds = 41;
    window.onload = function() {
        countdown('countdown');
        myFunction();
        myFunctiontoo();

    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById("timerx");
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "Free trial bonus has expired!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
            seconds--;
        }, 1000);
    }
    </script>

    <div class="countdown"><span style="color:#EA0423;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
  </div>

在我的 HTML 代码中，我有另一个计时器。

<span style="color:#FFF1D6;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.

不幸的是，第二个计时器不起作用。

Answer 1

除 getElementsByClassName 之外的方法 getElementById 仅返回一个 DOM 元素。

方法 getElementsByClassName 返回一个元素数组，以便您可以使用索引获取它们

这是工作示例:PLUNKER

您可以使用 getElementsByClassName，您的代码将如下所示:

    function countdown(element) {
    var start_value = "Free trial bonus has expired!"
    interval = setInterval(function() {
        var el1 = document.getElementsByClassName("timerx")[0];
        var el2 = document.getElementsByClassName("timerx")[1];
        if(seconds == 0) {
            if(minutes == 0) {
                el1.innerHTML = start_value;                    
                el2.innerHTML = start_value;                    
                clearInterval(interval);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }
        if(minutes > 0) {
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }
        var second_text = seconds > 1 ? 'seconds' : 'second';
        el1.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
        el2.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
        seconds--;
    }, 1000);
}