Question

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

截至目前，它们都在一行中，我希望在每个数字下方显示几天/小时/分钟/秒，如下所示：http://prnt.sc/b8le72 - 此外，是否可以设置文本和数字的样式单独使用CSS？（比如将文字设为橙色但保持数字为白色）

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或等效的空格字符填充文本。这是文本内容的纯硬编码，在许多情况下都会破解。

工作小提琴here。

方法＃2 ：将当前div（包含整个数据）拆分为四个独立的div - 每天一个，几天，几小时等。

确保这些四肢分为“并排”而不是“一个在另一个之上”。我所知道的解决这个“并排”问题的最简单的方法是旧学校table布局。因此，将所有div放在表的一个<tr>中，将它们渲染为单行。那就行了。

另外，我发现this回答有帮助，虽然我无法在这里工作。

使用表格布局here。

使用表格布局和颜色格式：使用答案here获取指导： JS中的跨度：here 跨度在HTML中：here

Answer 2

我的工作建议也会填写数字并处理丹麦语中的复数天/小时/小时

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倒计时器中进行换行？

2 个答案: