How to break lines in this javascript correctly

Question

https://jsfiddle.net/mrnf4q7g/

I am trying to install this script on two lines, such as:

123     20        13     03
Days    Hours     Min    sec 

I tried using brand \n, but it tends to stairs down the page.

Answer 1

Create four separate elements in an element #countdown

<div id="countdown">
    <span class="sect" id="days"></span>
    <span class="sect" id="hrs"></span>
    <span class="sect" id="mins"></span>
    <span class="sect" id="secs"></span>
</div>

Then set these items to display: inline-block

.sect {
    display: inline-block;
}

Then set each item innerHTMLseparately and enable line break

days.innerHTML = Math.floor(distance / _day) + '<br> days ';
hrs.innerHTML  = Math.floor((distance % _day) / _hour) + '<br> hours ';
mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';

CountDownTimer('October 21, 2015 19:00:00', 'countdown');
var days = document.getElementById('days');
var hrs = document.getElementById('hrs');
var mins = document.getElementById('mins');
var secs = document.getElementById('secs');

function CountDownTimer(date, id) {
    var end       = new Date(date);
    
    var _second   = 1000;
    var _minute   = _second * 60;
    var _hour     = _minute * 60;
    var _day      = _hour * 24;
    var timer;
    
    var showRemaining = function() {
        var now = new Date();
        var distance = end - now;

        if (distance < 0) {   
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';
            return;
        }
        
        days.innerHTML = Math.floor(distance / _day) + '<br> days ';
        hrs.innerHTML  = Math.floor((distance % _day) / _hour) + '<br> hours ';
        mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
        secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';
    };
    
    timer = setInterval(showRemaining, 1000);
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.sect {
    display: inline-block;
}

<div id="countdown">
    <span class="sect" id="days"></span>
    <span class="sect" id="hrs"></span>
    <span class="sect" id="mins"></span>
    <span class="sect" id="secs"></span>
</div>

Run codeHide result

Answer 2

Do you look something like this?

If you need any improvements in this answer, just comment.

CountDownTimer('October 21, 2015 19:00:00', 'countdown');

function CountDownTimer(date, id) {
    var end       = new Date(date);
    
    var _second   = 1000;
    var _minute   = _second * 60;
    var _hour     = _minute * 60;
    var _day      = _hour * 24;
    var timer;
    
    var showRemaining = function() {
        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 =  '<div class="FL M5">' + days + '<br> days </div>';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + hours + '<br> hours </div>';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + minutes + '<br> mins ';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + seconds + '<br> secs </div>';
    };
    
    timer = setInterval(showRemaining, 1000);
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.FL{
  float:left;
}

.CB{
  clear:both;
}

.M5{
  margin:5px;
}

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

Run codeHide result

Did this help?

Answer 3

xwhtLikeThis , :

<table>
  <tr>
    <td>123</td>
    <td>20</td>     
    <td>13</td>
    <td>03</td>
  </tr>

  <tr>
   <td>Days</td>
   <td>Hours</td>       
   <td>Min</td>
   <td>Sec</td>
  </tr>

</table>

Answer 4

, . html javascript, HTML ​​:

function updateTime(days, hours, min, sec) {
    var html = "
    <div class='row'>
        <div id='days'>"+days+"</div>
        <div id='hours'>"+hours+"</div>

        ..etc

    </div>
    ";
    document.getElementById(id).innerHTML = html;
}

It’s easier to look and style, in my opinion, maybe even try https://mustache.imtqy.com/