Estoy tratando de mostrar un temporizador de cuenta regresiva simple de 24 horas que se reinicia una vez que expira. Noté que solo mostrará un elemento con la hora. Estoy usando ID duplicadas para el ejemplo, pero el temporizador no funciona en absoluto con las clases. Si puede detectar dónde me estoy equivocando o sugerir otro script eficiente, sería genial.
function makeMeTwoDigits(n) { return (n < 10 ? "0" : "") + n; } // Set the date we're counting down to var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="time" document.getElementById("time").innerHTML = makeMeTwoDigits(hours) + ":" + makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + ""; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("time").innerHTML = "soon"; } }, 1000); <span id="time" style="font-size: 28px;"></span> <span id="time" style="font-size: 28px;"></span>Puede usar una clase con querySelectorAll y hacer un bucle en el resultado:
function makeMeTwoDigits(n) { return (n < 10 ? "0" : "") + n; } // Set the date we're counting down to var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).getTime(); // Select all .time var timeSpans = document.querySelectorAll(".time") // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in all elements with class="time" timeSpans.forEach(span => { span.innerHTML = makeMeTwoDigits(hours) + ":" + makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + ""; }) // If the count down is over, write some text if (distance < 0) { clearInterval(x); timeSpans.forEach(span => { span.innerHTML = "soon"; }) } }, 1000); <span class="time" style="font-size: 28px;"></span> <span class="time" style="font-size: 28px;"></span>cambie la identificación del segundo y copie lo que hizo para uno y haga para el otro
function makeMeTwoDigits(n) { return (n < 10 ? "0" : "") + n; } // Set the date we're counting down to var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="time" document.getElementById("time").innerHTML = makeMeTwoDigits(hours) + ":" + makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + ""; document.getElementById("time2").innerHTML = makeMeTwoDigits(hours) + ":" + makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + ""; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("time").innerHTML = "soon"; document.getElementById("time2").innerHTML = "soon"; } }, 1000); <span id="time" style="font-size: 28px;"></span> <span id="time2" style="font-size: 28px;"></span>