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 =
      "Msg after!";
    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;
}

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

Mosh Feu · Accepted Answer

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 =
      "Msg after!";
      // 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;
}

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

Javascript countdown problems when page reloads

Answers (2)

Related Questions