Question

我一直试图将这个小提琴放在两行上，例如：

123     20        13     03
Days    Hours     Min    sec

我已尝试使用br和\n，但它往往会向下翻页。

Answer 1

在#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>

然后将这些元素设置为display: inline-block

.sect {
    display: inline-block;
}

然后分别设置每个元素innerHTML并包含换行符

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

＆＃13;

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

＆＃13;

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.sect {
    display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 2

你看起来像那样吗？

如果您需要对此答案进行任何改进，请发表评论。

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>

这有帮助吗？

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

我没有时间为你写一个小提琴，但这是我的建议。用零javascript写出你的html，然后将该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;
}

在我看来更容易看到和风格，甚至可以尝试https://mustache.github.io/

如何在此javascript中正确设置换行符的样式

4 个答案: