Как добавить новую строку к отображаемым существующим словам?

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

вы можете использовать шаблонный литерал и <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

Вы можете использовать таблицу для этого.Внутри кода 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>

Answer 3

Все пробелы (включая \n и \r) в HTML отображаются как один пробел.</br> является недействительным тегом.Элемент br записывается с тегом <br> (<br/> в XHTML).

Чтобы получить вывод, подобный тому, который вы описали, вы, вероятно, захотитеa table.