Countdown timer - Javascript

Question

I'm trying to create a countdown timer for quizzes that students can take on a website. The time limit would be 2 hours but for some reason I can only get my code to decrement minutes, not hours. What am I doing wrong here?

function startTimer(duration, display) {
  var start = Date.now(),
    diff,
    hours,
    minutes,
    seconds;

  function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);

    hours = 2;
    minutes = (diff / 60) | 0;
    seconds = (diff % 60) | 0;

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = hours + ":" + minutes + ":" + seconds;

    if (diff <= 0) {
      start = Date.now() + 1000;
    }
  };
  timer();
  setInterval(timer, 1000);
}

window.onload = function() {
  var display = document.querySelector('#time');
  startTimer(seconds, display);
};

<div>Time remaining: <span id="time">2:00:00</span></div>

You're setting hours to 2 and never changing it. Shouldn't you be getting the hours from diff just like you are the minutes and seconds? — Jesse
– Jesse, Commented Oct 14, 2022 at 22:39
startTimer(seconds, display) is incorrect. seconds is undefined. seconds only exists in the timer function, so you should also set seconds as a global variable. — Parking Master
– Parking Master, Commented Oct 14, 2022 at 22:45
Also (this has nothing to do in answering your question) 1000 ms in JavaScript is kinda slow. I recommend using 950 ms for your countdown (don't worry, 50 ms is the time it takes to blink so it won't speed up too much) — Parking Master
– Parking Master, Commented Oct 14, 2022 at 22:48

Muhammad Khuzaima Umair · Accepted Answer · 2022-10-14 22:49:55Z

4

You are not currently calculating the hours. They are assigned a constant value i.e. 2. Update the line hours = 2; with

hours = (diff / 3600) | 0;

Currently, minutes can be greater than 60. So, that line should be:

minutes = (diff / 60) % 60 | 0;

Moreover, You have not declared the variable seconds when calling from window.onload event. It should be like:

window.onload = function() {
  let seconds = 2 * 60 * 60; // 2 hours to seconds
  var display = document.querySelector('#time');
  startTimer(seconds, display); // alternatively, you can pass value directly without declaring a variable.
};

function startTimer(duration, display) {
  var start = Date.now(),
    diff,
    hours,
    minutes,
    seconds;

  function timer() {
    diff = duration - (((Date.now() - start) / 1000) | 0);

    hours = (diff / 3600) | 0;
    minutes = (diff / 60) % 60 | 0;
    seconds = (diff % 60) | 0;

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = hours + ":" + minutes + ":" + seconds;

    if (diff <= 0) {
      start = Date.now() + 1000;
    }
  };
  timer();
  setInterval(timer, 1000);
}

//window.onload = function () {
var display = document.querySelector('#time');
startTimer(2 * 60 * 60, display);
//};

<div>Time remaining: <span id="time">2:00:00</span></div>

edited Oct 14, 2022 at 22:49

answered Oct 14, 2022 at 22:38

Muhammad Khuzaima Umair

7368 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parking Master Over a year ago

Please add a line explaining that seconds is not defined also

Muhammad Khuzaima Umair Over a year ago

Sure, I will. I ignored that maybe the person has defined that somewhere else and not included that part.

Collectives™ on Stack Overflow

Countdown timer - Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related