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

您可以在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 example

Answer 2

正如Temani Afif在评论中提到的那样，您应该指定每个数字以分开跨度，并按自己的喜好设置样式。

这是一个有效的示例：

    main_project/
        my_scripts/
            function1.py
            function2.py
        lib/
            library1.py
            library2.py
        main_program.py

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;
}

如何使用或不使用JavaScript在数字之间添加垂直线？

2 个答案: