CODEWITHSUNDEEP
javascriptcountdown
magflok
magflok

Reputation: 25

Simple Hour Countdown

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.

Upvotes: 0

Views: 1594

Answers (3)

user5341580
user5341580

Reputation:

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.

Upvotes: 0

Steve Chamaillard
Steve Chamaillard

Reputation: 2339

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.

Upvotes: 1

Jordi Flores
Jordi Flores

Reputation: 2150

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>

Upvotes: 0

Related Questions