Javascript time counter running backwards

Question

Hi guys I have a time counter I want to count from 15 to 0. but with the current version it counts from 0 to 15. it should be running backwards. any suggestions?

  // Set the minutes
  var countDownMins = new Date().getMinutes() + 15;

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get current time
    var now = new Date().getTime();

    var distance =  now + countDownMins;

    mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    secs = Math.floor((distance % (1000 * 60)) / 1000);        

    // Output the results
    document.getElementById("minutes").innerHTML = mins;
    document.getElementById("seconds").innerHTML = secs;

    if (mins < 0) {
      clearInterval(x);
    }

  }, 1000);

What is `var distance = now + countDownMins;` supposed to do? — Jonas Wilms, Apr 03 '20 at 09:44
@JonasWilms I'm calculating the distance between the timer we need to count and current time here — , Apr 03 '20 at 09:47
why dont you simply create a datetime of your start time and the project one for your end time, out side the interval, then in the interval use the end date time and date methods to diff them against now? Let the language do the work https://stackoverflow.com/questions/1968167/difference-between-dates-in-javascript — developer, Apr 03 '20 at 09:50
@developer I'm a javascript novice. can you please give me an example? — , Apr 03 '20 at 09:51
link to example : https://stackoverflow.com/questions/1968167/difference-between-dates-in-javascript — developer, Apr 03 '20 at 09:53

Terry Lennox · Accepted Answer · 2020-04-03T10:29:07.250

A few small modifications should make this work nicely!

You could save the countdown timer to local storage like so:

var countDownTarget = localStorage.getItem('countDownTarget');
if (!countDownTarget) {
    countDownTarget = new Date().getTime() + 15 * 60 * 1000;;
    localStorage.setItem('countDownTarget', countDownTarget);
}

var countDownTarget = new Date().getTime() + 15 * 60 * 1000;

function showClock(target) {
    const distance = target - new Date().getTime();
    const mins = distance < 0 ? 0: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const secs = distance < 0 ? 0: Math.floor((distance % (1000 * 60)) / 1000);        

    // Output the results
    document.getElementById("minutes").innerHTML = mins;
    document.getElementById("seconds").innerHTML = secs;
}

showClock(countDownTarget);

// Update the count down every 1 second
var x = setInterval(function() {
    showClock(countDownTarget);
    if (countDownTarget - new Date().getTime() < 0) {
        clearInterval(x);
    }
}, 1000);

Minutes: <b id="minutes"></b>
Seconds: <b id="seconds"></b>

This works but the problem is on reload it resets the timer. the previous doesn't reset on reload. any suggestions? — , Apr 03 '20 at 10:01
If you would like the timer not to reset on reload, one would have to store the initial timer value (countDownTarget ) to local storage or some other non-volatile storage medium, then check to see if this value is present. If so, continue the countdown. — Terry Lennox, Apr 03 '20 at 10:08

score 0 · Answer 2 · answered Apr 03 '20 at 10:11

Try this way

// Set the minutes
var countDownMins = new Date().getTime() + (1000 * 60 * 15);

// Update the count down every 1 second
var x = setInterval(function() {

 // Get current time
 var now = new Date().getTime();

 var distance = countDownMins - now;

 mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 secs = Math.floor((distance % (1000 * 60)) / 1000);        

 // Output the results
 document.getElementById("minutes").innerHTML = mins;
 document.getElementById("seconds").innerHTML = secs;

 if (mins < 0) {
   clearInterval(x);
 }

}, 1000);

Javascript time counter running backwards

2 Answers2