Simple Hour Countdown

Question

I am trying to do this kind of countdown:

Now it is 09:20 and I am wanna how many minutes and seconds has left to 1 hour. So it would take 40 minutes to 10:00.

This countdown has to continuously count this gap within the day.

I've tried the following but it didn't work:

var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();

function initClock(id) {
  const counter = document.getElementById(id);

  const minutesItem = counter.querySelector('.js-countdown-minutes');
  const secondsItem = counter.querySelector('.js-countdown-seconds');

  function updateClock() {
    mins = now.getMinutes();
    secs = now.getSeconds();

    minutesItem.innerHTML = (60 - mins);
    secondsItem.innerHTML = (secs);

  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

initClock('js-countdown');

The Seconds aren't being updated.

When saying _it didn't work_ it's better to say what didn't work — George, Nov 20 '17 at 11:25
Possible duplicate of [How can I make a program that reads the date(hour,minutes,seconds) then it subtracts it from the second date](https://stackoverflow.com/questions/46973205/how-can-i-make-a-program-that-reads-the-datehour-minutes-seconds-then-it-subtr) — TessavWalstijn, Nov 20 '17 at 11:38

score 1 · Accepted Answer · answered Nov 20 '17 at 11:31

You need to redecalre now = new Date();. It's not getting update on every updateClock() iteration.

The code fixed :

function initClock(id, endtime) {
  const counter = document.getElementById(id);

  const minutesItem = counter.querySelector('.js-countdown-minutes');
  const secondsItem = counter.querySelector('.js-countdown-seconds');

  function updateClock() {
    var now = new Date(),
        mins = now.getMinutes(),
        secs = now.getSeconds();

    minutesItem.innerHTML = (60 - mins);
    secondsItem.innerHTML = (secs);

  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

initClock('js-countdown', 3600);

And by the way, those first three lines :

var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();

are unneeded.

Thanks! Sorry for this elementary mistake. Still new to Javascript. — magflok, Nov 20 '17 at 11:33
No problem, please check this as the right answer if that fixed your problem ! — Steve Chamaillard, Nov 20 '17 at 11:34

score 0 · Answer 2 · answered Nov 20 '17 at 11:31

Take a look at this countdown, you can use this function to get the counter result.

function getCountDown(initDate) {
 // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = initDate - 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);

  // Display the result in the element with id="demo"
  return days + "d " + hours + "h "
  + minutes + "m " + seconds + "s "
}
// Set the date we're counting down to

var countDownDate = new Date("Jan 5, 2018 15:37:25").getTime();
var strCounDown = getCountDown(countDownDate)

document.getElementById("demo").innerHTML = strCounDown;

<p id="demo"></p>

score 0 · Answer 3 · 2017-11-20T11:44:31.193

The goal you want to achieve isn't well described to be honest. But if you want your counter to be constantly updated, you have to update now variable every time updateClock function is called. So, you need to put this:

var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();

inside your updateClock function. Thus, you won't need those lines in the beginning of your code. Besides that, I don't understand why you have endtime argument for initClock function, as you never use it.

Btw, perhaps you want to change secondsItem.innerHTML = (secs); to secondsItem.innerHTML = (60 - secs); if it's a countdown as you say.

Sorry. English is not my first language. ): As for the seconds, you are correct. Thanks. — magflok, Nov 20 '17 at 11:43

Simple Hour Countdown

3 Answers3