如何在 Javascript 倒数计时器中换行？

Question

我在内联 JS 元素中有一个倒数计时器。

截至目前，它们都在一行中，我希望 days/hours/mins/secs 出现在每个数字下方，如下所示： http://prnt.sc/b8le72 - 另外，是否可以设置文本和数字的样式分别在 CSS？（比如将文本设为橙色但数字保持白色）

https://jsfiddle.net/eyd8fd4x/

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>

<body>

<div id="forsidediv">
<img id="forsidepic" src="forsidepic.png">
</div>

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

<script>
CountDownTimer('06/25/2016 10:00 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 = days + ' dage ';
        document.getElementById(id).innerHTML += hours + ' timer ';
        document.getElementById(id).innerHTML += minutes + ' minutter ';
        document.getElementById(id).innerHTML += seconds + ' sekunder';
    }

    timer = setInterval(showRemaining, 1000);
}
</script>


</body>
</html>

CSS:

@charset "utf-8";

body {
margin:0;   
}

#countdowner {
color:white;
position:absolute;
margin:0;
margin-top:5em;
padding:0;
text-align:center;
width:100%;
font-size:1em;
font-family:Helvetica;
}

#forsidediv {
position:fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}

#forsidepic {
width: 100%;
}

Answer 1

方法 #1： 不涉及对当前 div 布局的更改：

使用nbsp或类似的空白字符来填充文本。这是文本内容的纯硬编码，在许多情况下都会中断。

工作 fiddle here.

方法 #2：将当前 div（包含全部数据）拆分为四个独立的 divs - 一个天，一个小时等

确保这四个 div 的布局是 "side-by-side" 而不是 "one above another"。我知道解决此 'side-by-side' 问题的最简单方法是老式 table 布局。因此，将所有 div 放在 table 的单个 <tr> 中，以将它们呈现为一行。这样就可以了。

此外，我发现 this 的回答很有帮助，尽管我无法在此处使用它。

使用 table 布局 here。fiddle。

使用 fiddle table 布局和颜色格式：使用答案 here 作为指导： JS 中的跨度：here HTML 中的跨度：here

Answer 2

我的工作建议还用丹麦语填充数字和处理复数 day/days hour/hours

CountDownTimer('06/25/2016 10:00 AM', 'countdown');

function pad(num) {
  return String("0" + num).slice(-2);
}

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;
  document.getElementById(id).innerHTML = '<div class="tm" id="' + id + 'days"></div>' +
    '<div class="tm" id="' + id + 'hours"></div>' +
    '<div class="tm" id="' + id + 'mins"></div>' +
    '<div class="tm" id="' + id + 'secs"></div>';

  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 + "days").innerHTML = days + '<br/>dag' + (days == 1 ? "" : "e");
    document.getElementById(id + "hours").innerHTML = pad(hours) + '<br/>time' + (hours == 1 ? "" : "r");
    document.getElementById(id + "mins").innerHTML = pad(minutes) + '<br/> minut' + (minutes == 1 ? "" : "ter");
    document.getElementById(id + "secs").innerHTML = pad(seconds) + '<br/>sekund' + (seconds == 1 ? "" : "er");
  }

  timer = setInterval(showRemaining, 1000);
}

@charset "utf-8";
body {
  margin: 0;
}

#countdowner {
  color: red;
  position: absolute;
  margin: 0;
  margin-top: 5em;
  padding: 0;
  text-align: center;
  width: 100%;
  font-size: 1em;
  font-family: Helvetica;
}

#forsidediv {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}

#forsidepic {
  width: 100%;
}

#countdown {
  width: 100%
}

.tm {
  text-align: center;
  display: inline-block;
  padding-left: 20px
}

<div id="forsidediv">
  <img id="forsidepic" src="forsidepic.png">
</div>

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

如何在 Javascript 倒数计时器中换行？

How do I make line breaks in a Javascript countdown timer?

javascript

css

inline

line

styling