Countdown text content days,minutes,seconds move dynamically

Question

I have this code The countdown is running ok but the problem is the text content in the new line display differently when the counting started. I want the text content and the timer display fixed. Please Help Thank you.

var countDownDate = new Date("December 25, 2018").getTime();
    
var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);

    var left = document.getElementById('time'); 
    left.childNodes[0].textContent =  " "+days + " " + hours + "    "
    + minutes + "  " + seconds + " "; 
    left.childNodes[1].textContent="Days"+"Hours"+"Minutes"+"Seconds";

    if (distance < 0) {
        clearInterval(x);
        document.getElementById("left").innerHTML = "EXPIRED";
    }
}, 1000);

#time #left{
  color: black;
  font-size: 70px;
  margin-top: 10px;
}

#time #date{
  color: #0000FF;
  font-size: 90px;
  margin-top: -28px;
}

<div id="time">
  <p id="left"></p>
  <p id="date"></p>
</div>

And i want this one to be the output:

output that i want to be the result

The easiest way to create that layout is probably by using a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) — Titus, Aug 11 '18 at 17:38
Who is us and who is recommending ? Actually, it doesn't matter, if there are restriction in how you should solve this, you should mention them in your question. — Titus, Aug 11 '18 at 17:42
My professor he want me to use text content rather than table thank you very much for your help — rrr, Aug 11 '18 at 17:45
Ok, in that case, you should probably take a look at this: https://stackoverflow.com/q/9792849/1552587 it contains some answers that show how you could add spaces in HTML. — Titus, Aug 11 '18 at 17:47
Don't use `\t` use ` ` or ` ` or any of the suggestions from the answers to that question. — Titus, Aug 11 '18 at 17:59

score 0 · Answer 1 · answered Aug 11 '18 at 19:06

var countDownDate = new Date("December 25, 2018").getTime();
    
var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;

    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);

    var countdownDiv = document.getElementById('countdown').children; 
    countdownDiv[0].innerHTML = '<div class="cnt">'+days+'</div>'+'<div class="txt">Days</div>';
    countdownDiv[1].innerHTML = '<div class="cnt">'+hours+'</div>'+'<div class="txt">Hours</div>';
    countdownDiv[2].innerHTML = '<div class="cnt">'+minutes+'</div>'+'<div class="txt">Minutes</div>';
    countdownDiv[3].innerHTML = '<div class="cnt">'+seconds+'</div>'+'<div class="txt">Seconds</div>';
    
    if (distance < 0) {
        clearInterval(x);
        document.getElementById('countdown').innerHTML = "EXPIRED";
    }
}, 1000);

#countdown {
  width: 400px;
}
#countdown > div {
  float:left;
  width:25%;
}
.cnt,.txt {
  text-align: center;
}
.cnt {
  font-size: 30px;
  color: black;
}
.txt {
  font-size: 15px;
  color: #0000FF;
}

<div id="time">
  <div id="countdown">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Reformatted your code. See if this helps.

Countdown text content days,minutes,seconds move dynamically

1 Answers1