如何添加正在显示一个新行现有的话吗？

Question

我这行的，其真实显示一个计时器代码：

timerDisplay.innerHTML = days + "days " + hours + "hours " + minutes + "minutes " + seconds + "seconds ";

问题是，它的出现就像这样：

10days 12hours 34mins 20seconds

我希望它看起来像这样：

10   12    34      20
days hours minutes seconds

在我的努力，我在前面，每个字（日，时，分，秒）的后面试图\n和\r以及</br>，但它不工作。

我在做什么错了，我该如何解决？

Answer 1

您可以使用template literal和<span>s和<br />

const days = "05",
  hours = "08",
  minutes = "32",
  seconds = "11";

document.querySelector("#time").innerHTML = `
  <span>${days} <br /> days</span> 
  <span>${hours} <br/> hours</span>
  <span>${minutes}<br/> minutes</span> 
  <span>${seconds}<br/> seconds `;

span {
  display: inline-block;
  width: 50px;
}

<div id="time"></div>

Answer 2

在HTML所有空白（包括\n和\r）呈现为一个单一的空间。 </br>is无效的标签。所述br元件写入与<br>标签（<br/>在XHTML）。

为了得到像你描述的内容输出，不过，你可能想要一个table。

Answer 3

您可以使用一个表做这件事。里面的JavaScript代码，我创建你要显示的格式模板，然后将其指定为div将证明这一点。

var days = 10;
var hours = 12;
var minutes = 34;
var seconds = 20;

var tableFormat = 
		'<table>' + 
			'<tr>' + 
				'<td>' + 
					'<label>' + days + '</label>' + 
				'</td>' + 
				'<td>' + 
					'<label>' + hours + '</label>' + 
				'</td>' + 
				'<td>' + 
					'<label>' + minutes + '</label>' + 
				'</td>' + 
				'<td>' + 
					'<label>' + seconds + '</label>' + 
				'</td>' + 
			'</tr>' + 
			'<tr>' + 
				'<td>' + 
					'<label>days</label>' + 
				'</td>' + 
				'<td>' + 
					'<label>hours</label>' + 
				'</td>' + 
				'<td>' + 
					'<label>minutes</label>' + 
				'</td>' + 
				'<td>' + 
					'<label>seconds</label>' + 
				'</td>' + 
			'</tr>' + 
		'</table>'

timerDisplay.innerHTML = tableFormat;

<div id="timerDisplay"></div>