Estoy tratando de crear un contador Countup que comience de 1 a 10000 y no quiero que se reinicie cuando el usuario actualice la página o cancele la página. El contador debe comenzar desde 1 para cada usuario que visita la página y seguir ejecutándose en segundo plano hasta llegar a 10000, incluso si la página está cerrada. He escrito la página debajo de la cual;
function countUp() { var countEl = document.querySelector('.counter'); var countBar = document.querySelector('.progress-bar'); var x = parseInt(localStorage.getItem('lastCount')) - 1 || 1; var y = countEl.dataset.to; var z = countBar.dataset.to; function addNum() { countEl.innerHTML = x; x += 1; if (x > y && x > z) { clearInterval(timer); } localStorage.setItem('lastCount', x); } var timer = window.setInterval(addNum, 1000); localStorage.setItem("addNum", counter); toggleBtn.addEventListener('click', function(){ countUp(); toggleBtn.classList.add('hidden'); }); } countUp();</script> <body onload=countUp();> <div class="counter" data-from="0" data-to="10000000"></div> <div class="progress-bar" data-from="0" data-to="10000000"></div> </body>Es difícil mostrar un ejemplo en StackOverflow porque no te permite jugar con localStorage, pero parece que quieres algo como:
Algo similar debería funcionar incluso si actualizan la página y, dado que está calculando a partir de la marca de tiempo original, "contará" en segundo plano, incluso si la página está cerrada.
window.addEventListener("DOMContentLoaded", () => { const start = localStorage.getItem("timestamp") || Date.now(); localStorage.setItem("timestamp", start); function tick() { const now = Date.now(); const seconds = Math.floor((now - start) / 1000); const display = document.getElementById("display"); if (seconds > 10000) return display.innerHTML = "We're done"; display.innerHTML = seconds; setTimeout(tick, 1000); } tick(); }); <div id="display"></div>Por lo tanto, el código del lado del cliente normalmente no se puede ejecutar cuando se cierra una página de javascript del lado del cliente.
Sin embargo, lo que podría hacer es calcular dónde debería estar el temporizador la próxima vez que se cargue.
Por ejemplo, en su función addNum() , además del último conteo, también podría almacenar la fecha (y hora) actual.
function addNum() { countEl.innerHTML = x; x += 1; if (x > y && x > z) { clearInterval(timer); } localStorage.setItem('lastCount', x); localStorage.setItem('lastDate', new Date()); } Luego, cuando comience su código, puede recuperar lastDate y luego restarle la Date() . Luego úsalo para agregar la diferencia a tu contador.
function countUp() { let storedCount = parseInt(localStorage.getItem('lastCount')); let storedDate = Date.parse(localStorage.getItem('lastDate')); let now = new Date() let diffSeconds = (now.getTime() - storedDate.getTime()) / 1000; let storedCount += diffSeconds; var countEl = document.querySelector('.counter'); var countBar = document.querySelector('.progress-bar'); var x = storedCount - 1 || 1; var y = countEl.dataset.to; var z = countBar.dataset.to; }Estoy seguro de que se requieren algunos cambios más para que funcione con su código, pero la idea es almacenar la hora actual para que cuando la página se cierre y se vuelva a abrir, pueda 'ajustar' el conteo para ponerse al día. debiera ser.
Lo que quiere aquí no es posible solo desde el código del lado del cliente, no hay forma de que 2 máquinas diferentes compartan esa información.
Sin embargo, aquí está la cosa, puede hacer esto con un backend donde la base de datos se actualiza cada vez que una nueva IP llega al servidor. Tenga en cuenta que con este enfoque, un usuario aquí es un sistema y no diferentes navegadores o sesiones.
Para actualizar este tiempo real para alguien que ya está en el sitio web, ejecute un temporizador y llame a una API que le proporcione específicamente el conteo. Por lo tanto, la página se actualiza con frecuencia. También puede hacer esto con react-query , ya que viene con funciones incorporadas para hacer todo esto.