1页上的多个JavaScript计时器

Question

I hope you guys can help me out as I have little knowledge on javascripts. I've been using the same timer over and over again and it always works like a charm. Although when I'm trying to add the same timer again further down my page only 1 works.

 function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function () { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; } }, 1000); } window.onload = function () { var fiveMinutes = 60 * 10.1, display = document.querySelector('.time'); startTimer(fiveMinutes, display); }; 

 <span class="time">10:07</span> <br/> <br/> <br/> <span class="time">10:07</span> 

I have already tried adding a second script for a different class, but unfortunately no working results...

Is anyone able to help me out? JSfiddle prefered since I've little knowledge on javascript! Thanks in advance!

Answer 1

Use querySelectorAll

 function startTimer(duration, displays) { var timer = duration, minutes, seconds; setInterval(function () { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; Array.prototype.forEach.call(displays, function(display) { display.textContent = minutes + ":" + seconds; }); if (--timer < 0) { timer = duration; } }, 1000); } window.onload = function () { var fiveMinutes = 60 * 10.1, displays = document.querySelectorAll('.time'); startTimer(fiveMinutes, displays); }; 

 <span class="time">10:07</span> <br/> <br/> <br/> <span class="time">10:07</span> 

Answer 2

function startTimer(duration, display, display2) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        display2.textContent = display.textContent;
        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}




 window.onload = function () {
    var fiveMinutes = 60 * 10.1,
        display = document.querySelector('.time');
        display2 = document.querySelector('.time2');
    startTimer(fiveMinutes, display ,display2);
};