Simple count down clock doesn't stop at zero

JavaScript
1

Hi everyone,
inspired from the page Build a Countdown Timer in Just 18 Lines of JavaScript - SitePoint
I came up with the following code. It works perfectly unless it reaches the deadline where it should show only zeros. However, it’s still counting and negative.
Has anyone an idea what went wrong?
Thanks in advance.
Fred
Code:

<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Tage</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Stunden</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minuten</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Sekunden</div>
  </div>
</div>
<style>
    body{
	text-align: center;
	background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h2{
  color: ##ff662e;
  font-weight: 100;
  font-size: 24px;
  margin: 40px 0px 20px;
}

#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}

#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #00BF96;
	display: inline-block;
}

#clockdiv div > span{
	padding: 15px;
	border-radius: 3px;
	background: #00816A;
	display: inline-block;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
}
</style>
<script>
    function getTimeRemaining(endtime) {
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));
  
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

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

      var jahr=2020, monat=12, tag=21, stunde=0, minute=0, sekunde=0;

const deadline = new Date(Date.parse(new Date(jahr,monat-1,tag,stunde,minute,sekunde)));
initializeClock('clockdiv', deadline);
</script>
2

Hi @Fredl01, welcome to the forums.

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

3

Hi @Gandalf,
thanks for changing it :slight_smile: . Will do in the future.
Regards

1 Like
4

Hey,

Are you sure that there are no other problems on the page?

I just tried the code you posted above and it worked as expected.

Do you have alink to somewhere we can see this in action?

5

It did?

I did the same thing and my browser died on the reference to timeinterval inside updateClock. (Line 99 tries to call updateClock before timeinterval is initialized, so line 95 chokes and dies if you give it a date in the past.)

Switching lines 99 and 100 clears that error. Once that’s done, the thing can accept any date, and operates correctly.

6

Yeah, I entered a valid date, then let it count down, and the clock stopped at 0:00:00:00 as expected.

However, you’re completely correct, if you start it off with a date in the past, then it borks. Good catch.

As an aside, it might be better to initialize the deadline in a more readable way.

This seems a bit unwieldy:

new Date(Date.parse(new Date( ... )));
8

Hi James,
in order to avoid “other problems” on the page, I always check code with an online javascript compiler.
Thanks and best regards

9

Great catch, indeed!
Thanks

10

Here’s the solution I found with help of @m_hutley

  • I switched lines 99 and 100 so that it doesn’t choke when promted with a date in the past
  • I set all variables to 0, so it doesn’t look awkward.
    Thanks guys for the great help.
    Best regards and a merry Xmas
function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total < 0) {
      clearInterval(timeinterval);
      daysSpan.innerHTML = ('0');
      hoursSpan.innerHTML = ('00');
      minutesSpan.innerHTML = ('00');
      secondsSpan.innerHTML = ('00');
    }
  }


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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.