Custom countdown timer javascript style

Question

I am trying to adjust the output of a javascript date counter. I need to style days, hours, minutes and seconds. I want to align each in its own div with its own left and top absolute values. When I try to do this, the timer does not replace the previous digits, but adds to them, creating a big mess.

Here is the output code that I am trying to create individually:

document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';

Here the violin works fine, but without a separate style

But when I try to put them in separate divs, crazy things happen, haha. The counter does not update, but simply adds numbers. Here is the script for this

How to do it?

Answer 1

When you insert values innerHTMLinto a div, you can wrap the values ​​inside the spanclass.

JSfiddle demo

document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';

CountDownTimer('01/01/2016 10:01 AM', 'countdown');

function CountDownTimer(dt, id) {
  var end = new Date(dt);

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

      clearInterval(timer);
      document.getElementById(id).innerHTML = 'EXPIRED!';

      return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
    document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
    document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
    document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';
  }

  timer = setInterval(showRemaining, 1000);
}

#countdown {
  position: absolute;
  z-index: 5;
  left: 20px;
  top: 20px;
  color: #ff0000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 32px;
  display: inline;
}
.days {
  color: lightblue;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.minutes {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.seconds {
  color: gray;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.hours {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}

<div id="countdown">


</div>

Run codeHide result

Answer 2

If you delete the line

document.getElementById(id).innerHTML = days + 'days ';

You will see "making a big mess." You must clear the div before putting them something.

document.getElementById(id).innerHTML = '';

Answer 3

, , 4 div div, . getElementById, div.

CSS .