Как добавить вертикальные линии между числами, используя или без использования JavaScript?

Question

Я создал таймер обратного отсчета до определенной даты, он отображается без проблем.Но на этот раз я хотел бы добавить вертикальные линии, разделяющие их.Я попытался borderLeft и height увидеть вертикальную линию, но безуспешно.Хотя я вижу 1px solid границу.Изображение ниже иллюстрирует то, что я хочу видеть в браузере.

Я также хочу, чтобы слова (дни, часы, минуты, секунды) появлялисьпод номерами.Судя по картинке, она появляется прямо рядом с ними.Я попытался использовать \n, потому что думал, что это поместит слово в новую строку, но это не сработало.

Нужно ли вообще использовать javascript для достижения этих целей?Что я делаю не так и как я могу это исправить?

Вот мой js:

var timerDisplay = document.getElementById("timer");
    timerDisplay.innerHTML = days + "\ndays " + hours + "\nhours " + minutes + "\nminutes " + seconds + "\nseconds ";
    timerDisplay.style.border = "1px solid";
    timerDisplay.style.borderLeft = "6px solid"
    timerDisplay.style.height = "10px";

Вот мой html:

<p id="timer"></p>

Answer 1

Как отметил Темани Афиф в комментариях, вы должны разделить каждое число на отдельный диапазон и стилизовать их так, как вам нравится.

Вот рабочий пример:

function countdown(endDate) {
  let days, hours, minutes, seconds;
  
  endDate = new Date(endDate).getTime();
  
  if (isNaN(endDate)) {
	return;
  }
  
  setInterval(calculate, 1000);
  
  function calculate() {
    let startDate = new Date();
    startDate = startDate.getTime();
    
    let timeRemaining = parseInt((endDate - startDate) / 1000);
    
    if (timeRemaining >= 0) {
      days = parseInt(timeRemaining / 86400);
      timeRemaining = (timeRemaining % 86400);
      
      hours = parseInt(timeRemaining / 3600);
      timeRemaining = (timeRemaining % 3600);
      
      minutes = parseInt(timeRemaining / 60);
      timeRemaining = (timeRemaining % 60);
      
      seconds = parseInt(timeRemaining);
      
      document.getElementById("days").innerHTML = parseInt(days, 10)+' days';
      document.getElementById("hours").innerHTML = ("0" + hours).slice(-2)+' hours';
      document.getElementById("minutes").innerHTML = ("0" + minutes).slice(-2)+' minutes';
      document.getElementById("seconds").innerHTML = ("0" + seconds).slice(-2)+' seconds';
    } else {
      return;
    }
  }
}

(function () { 
  countdown('04/01/2025 05:00:00 PM'); 
}());

.wrapper {
 background: #0084FF; 
 border: #000 1px solid;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

span:not(:last-child) {
  border-right: #000 1px solid;
}

span {
  padding: 0 5px;
  white-space: nowrap;
}

<div class="wrapper">
  <span id="days"></span>
  <span id="hours"></span>
  <span id="minutes"></span>
  <span id="seconds"></span>
</div>

Answer 2

Вы можете добавить встроенные элементы в p, таким образом, вы можете применить некоторые стили для достижения вашей цели.

Например:

const timerDisplay = document.querySelector("#timer")
timerDisplay.appendChild(createSpan('126 days'))
timerDisplay.appendChild(createSpan('5 hours'))
timerDisplay.appendChild(createSpan('16 minutes'))
timerDisplay.appendChild(createSpan('33 seconds'))

function createSpan (text) {
  const span = document.createElement('span')
  span.textContent = text
  return span
}

И с правильными стилями:

p {
  border: solid 5px black;
  background-color: teal;
}
span {
  display: inline-block;
  border-right: solid 5px black;
}

p span:first-child {
  text-align: right;
  width: 150px;
}

span:last-child {
  border-right: none;
}

С другой стороны, вы можете изменить свой HTML-код:

<p id="timer">
  <span class="days">126 days</span>
  <span class="hours"></span>
  <span class="minutes"></span>
  <span class="seconds"></span>
</p>

И затем вы можете изменить элементы spanнапрямую:

const timerDisplay = document.querySelector("#timer")
const days = timerDisplay.querySelector('.days')
const hours = timerDisplay.querySelector('.hours')
const minutes = timerDisplay.querySelector('.minutes')
const seconds = timerDisplay.querySelector('.seconds')

days.textContent = '126 days'
hours.textContent = '5 hours'
minutes.textContent = '16 minutes'
seconds.textContent = '33 seconds'

И с теми же стилями:

p {
  border: solid 5px black;
  background-color: teal;
}
span {
  display: inline-block;
  border-right: solid 5px black;
}

p span:first-child {
  text-align: right;
  width: 150px;
}

span:last-child {
  border-right: none;
}

Пример этого примера можно показать в jsfiddle: jsfiddle пример