jak resetować timer js za każdym razem gdy odświeżam stronę

Question

<div id="timer"></div>

const Interval = setInterval(setTimer, 1000);
function setTimer() 
{
	const d = new Date();
	const seconds = d.getMinutes() * 60 + d.getSeconds();
	const fseconds = 480;
	const timeleft = fseconds - (seconds % fseconds);
	const result = parseInt(timeleft / 60) + ":" + (timeleft % 60);
	if(timeleft==1)
	{
		window.location = "";
	}
	document.getElementById("timer").innerHTML = result;
	//console.log(seconds);
};

Comments

Ten kod, z tego co widzę, przypisze “location” na sekundę przed 5 minutami po pełnej godzinie.

Czy mógłbyś dokładniej sformułować pytanie?

---

chcę żeby za każdym razem gdy strona się odświeży, przeładuje, resetował się timer, a coś nie robi, próbowałem umieszczać w skrypcie clearInterval ale nie działa, chyba że źle go umieszczam

---

Chyba źle rozumiesz, co zwraca “Date()”. To wraca z aktualną datą: MSN Date.

Jeśli chcesz mieć licznik, to albo potrzebujesz sobie zapisać datę przy załadowaniu strony i następnie ją co sekundę odejmować od aktualnej, albo zwiększać licznik co sekundę, bazując na tym, że jest uruchamiany właśnie w takim odstępie czasu.

Answer 1

Odpal skrypt po załadowaniu strony, ale i tak nie zapisujesz stanu timera, więc za każdym razem startuje od nowa.
 

Answer 2

Przy odliczaniu w "dół" (count down), niekoniecznie musisz używać obiektu Date, możesz np. tak licznik zapisać

<div id="timer"></div>

<script>
  const MINUTES = 5; // minuty do odliczenia 5 ... 1, .5 30s, .25 15s itd.
  setTimeout(countDownTimer, 0, (MINUTES * 60));

  function countDownTimer(seconds) {
    //console.clear();
    //console.log(seconds);

    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = (seconds % 60).toString().padStart(2, '0');  
    document.getElementById('timer').textContent = `${minutes}:${remainingSeconds}`;

    if (seconds < 1) {
      window.location = '';
    }
    setTimeout(countDownTimer, 1000, --seconds);
  }
</script>

 

Comments

świetne właśnie o to mi chodziło, dzięki wielkie

<div id="timer"></div>
 
<script>
  setTimeout(countDownTimer, 0, (480));
 
  function countDownTimer(seconds) {
    //console.clear();
    //console.log(seconds);
 
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = (seconds % 60).toString().padStart(2, '0');  
    document.getElementById('timer').textContent = `${minutes}:${remainingSeconds}`;
 
    if (seconds < 1) {
      window.location = '';
    }
    setTimeout(countDownTimer, 1000, --seconds);
  }
</script>

 

---

@VBSe­r­vi­ce, tak zrobiony licznik może trochę opóźniać.

---

To też zależy jakiego rzędu dokładność potrzebuje @dido.

---

Można się pokusić o użycie

Performance.now()

 

The performance.now() method returns a high resolution timestamp in milliseconds.

i np. requestAnimationFrame

<div id="timer"></div>

<script>
  const MINUTES = 5; // minuty do odliczenia
  // Pobierz aktualny czas
  const startTime = performance.now();  
  // Rozpocznij odliczanie
  requestAnimationFrame(updateTimer);

  function updateTimer() {
    // Oblicz czas, który upłynął od rozpoczęcia odliczania
    const currentTime = performance.now();
    const elapsedTimeInSeconds = (currentTime - startTime) / 1000;

    // Oblicz pozostały czas
    const remainingSeconds = MINUTES * 60 - elapsedTimeInSeconds;
    const minutes = Math.floor(remainingSeconds / 60);
    const seconds = Math.floor(remainingSeconds % 60);
    
    if (remainingSeconds > 0) { // Sprawdź, czy odliczanie powinno być kontynuowane
      document.getElementById('timer').textContent = `${minutes}:${String(seconds).padStart(2, '0')}`;
      requestAnimationFrame(updateTimer); // Kontynuuj odświeżanie interfejsu
    } else {
      window.location = ''; // Przekieruj po zakończeniu odliczania
    }
  }
</script>

 

---

jak najbardziej jest wystarczająca ta dokładność

---

<div id="timer_1"></div>
<div id="timer_2"></div>

document.addEventListener( "DOMContentLoaded", () =>
  {   const minutes = 5;
      const e_1 = document.getElementById( "timer_1" );
      const e_2 = document.getElementById( "timer_2" );
      let e_2_seconds = minutes * 60;
      function e_1_function( seconds
      ){  const remaining_minutes = Math.floor( seconds / 60 );
          const remaining_seconds = ( seconds % 60 ).toString().padStart( 2, '0' );
          e_1.textContent = `${remaining_minutes}:${remaining_seconds}`;
          if( --seconds )
              setTimeout( e_1_function, 1000, seconds );
          else
              ;//location = "";
      }
      function e_2_function(
      ){  const remaining_minutes = Math.floor( e_2_seconds / 60 );
          const remaining_seconds = ( e_2_seconds % 60 ).toString().padStart( 2, '0' );
          e_2.textContent = `${remaining_minutes}:${remaining_seconds}`;
          if( !--e_2_seconds )
          {   clearInterval( e_2_interval );
              //location = "";
          }
      }
      const e_2_interval = setInterval( e_2_function, 1000 );
      e_1_function( minutes * 60 );
      e_2_function();
  }
);

Po uruchomieniu tego porównania wystarczy wcisnąć na przykład “Ctrl + PageUp”, by przełączać karty przeglądarki wstecz, i od razu widać różnicę. A “requestAnimationFrame” jest podobno zatrzymywane, gdy karta nie jest na wierzchu, chociaż tutaj to może być zamierzony efekt.

---

Jak to w programowaniu bywa, wszystko zależy od kontekstu i od wymaganej jak w tym przypadku dokładności.  

---

A “requestAnimationFrame” jest podobno zatrzymywane, gdy karta nie jest na wierzchu

w przypadku przeglądarki, której na co dzień używam, Brave, nawet gdy karta jest nieaktywna requestAnimationFrame nie jest zatrzymywane.