Javascript countdown problems when page reloads

Question

I found this script for countdown (Javascript). Everything works very well. When "date" is finished I'm displaying message which removes whole countdown timer.

The problem is when I refresh page countdown timer appears for let's say sec and then msg appears as it should be.

My question is can I do something to avoid this?

My code is here:

var deadline = new Date("mar 6, 2019 09:12:25").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var t = deadline - now;
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((t % (1000 * 60)) / 1000);
  document.getElementById("day").innerHTML = days;
  document.getElementById("hour").innerHTML = hours;
  document.getElementById("minute").innerHTML = minutes;
  document.getElementById("second").innerHTML = seconds;
  if (t < 0) {
    clearInterval(x);
    document.getElementById("clockdiv").innerHTML =
      "<p class='Msg'>Msg after!</p>";
    document.getElementById("day").innerHTML = "0";
    document.getElementById("hour").innerHTML = "0";
    document.getElementById("minute").innerHTML = "0";
    document.getElementById("second").innerHTML = "0";
  }
}, 1000);

body {
  text-align: center;
  background: #373737;
  font-family: sans-serif;
  font-weight: 100;
}

h1 {
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

.Msg {
  font-size: 18px;
  color: #fff
}

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

#clockdiv>div {
  padding: 10px;
  border-radius: 5px;
  background: #f9a936;
  display: inline-block;
}

#clockdiv div>span {
  padding: 15px;
  border-radius: 5px;
  background: #e95a2c;
  display: inline-block;
}

.smalltext {
  padding-top: 5px;
  font-size: 16px;
}

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
  <div class="text-center">
    <div id="clockdiv">
      <div>
        <span class="days" id="day"></span>
        <div class="smalltext">Days</div>
      </div>
      <div>
        <span class="hours" id="hour"></span>
        <div class="smalltext">Hours</div>
      </div>
      <div>
        <span class="minutes" id="minute"></span>
        <div class="smalltext">Minutes</div>
      </div>
      <div>
        <span class="seconds" id="second"></span>
        <div class="smalltext">Seconds</div>
      </div>
    </div>
  </div>

  <script src="main.js" async defer></script>
</body>

</html>

https://jsfiddle.net/n0967ocs/2/

You can hide all of the content (with `display: none` for example) and show the right element by the condition if the count is done or not. — Mosh Feu, Mar 06 '19 at 08:31
@codemirror, I think that the convention is describe the issue and then display the code because when a reader will read the code he will have a clue about what is the code about.. — Mosh Feu, Mar 06 '19 at 08:35

Mosh Feu · Accepted Answer · 2019-03-06T13:01:22.953

There are 2 issues you need to face with:

The first delay in the setInterval function.
The delay between the content is visible and the javascript is execution.

The solutions:

Run the function also immediately (Following this answer)
Hide #clockdiv by default it only when the view is actually ready.

Also, fill the counter elements only if need (wrapped it with if (t > 0) {)

var deadline = new Date("mar 6, 2019 09:12:25").getTime();

var x = setInterval(function check() {
  var now = new Date().getTime();
  var t = deadline - now;
  if (t > 0) {
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((t % (1000 * 60)) / 1000);
    document.getElementById("day").innerHTML = days;
    document.getElementById("hour").innerHTML = hours;
    document.getElementById("minute").innerHTML = minutes;
    document.getElementById("second").innerHTML = seconds;
  } else {
    clearInterval(x);
    document.getElementById("clockdiv").innerHTML =
      "<p class='Msg'>Msg after!</p>";
      // you can't access those elements because you already override them in the line above
    //document.getElementById("day").innerHTML = "0";
    //document.getElementById("hour").innerHTML = "0";
    //document.getElementById("minute").innerHTML = "0";
    //document.getElementById("second").innerHTML = "0";
  }
  document.getElementById('clockdiv').style.display = 'inline-block';
  return check;
}(), 1000);

body {
  text-align: center;
  background: #373737;
  font-family: sans-serif;
  font-weight: 100;
}

h1 {
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

.Msg {
  font-size: 18px;
  color: #fff
}

#clockdiv {
  font-family: sans-serif;
  color: #000000;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
  /*add this to hide by default*/
  visibility: none;
}

#clockdiv>div {
  padding: 10px;
  border-radius: 5px;
  background: #f9a936;
  display: inline-block;
}

#clockdiv div>span {
  padding: 15px;
  border-radius: 5px;
  background: #e95a2c;
  display: inline-block;
}

.smalltext {
  padding-top: 5px;
  font-size: 16px;
}

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
  <div class="text-center">
    <div id="clockdiv">
      <div>
        <span class="days" id="day"></span>
        <div class="smalltext">Days</div>
      </div>
      <div>
        <span class="hours" id="hour"></span>
        <div class="smalltext">Hours</div>
      </div>
      <div>
        <span class="minutes" id="minute"></span>
        <div class="smalltext">Minutes</div>
      </div>
      <div>
        <span class="seconds" id="second"></span>
        <div class="smalltext">Seconds</div>
      </div>
    </div>
  </div>

  <script src="main.js" async defer></script>
</body>

</html>

https://jsfiddle.net/moshfeu/g6dvaLej/9/

score 0 · Answer 2 · answered Mar 06 '19 at 08:56

I think your problem is here:

var deadline = new Date("mar 6, 2019 09:12:25").getTime();

the deadline is earlier than now, and the "Msg after" is showing. So you can modify the deadline, and countdown timer will show. If you just want the current deadline time, you should check the setInterval function, it excutes after 1s.

Javascript countdown problems when page reloads

2 Answers2