JavaScript Amount Of Time

Question

我目前正在从事一个项目，该项目将根据用户当前时间显示在一定时间段内剩下的时间。这是代码。

var periods = [
  [ '07:45' , '08:34' ],
  [ '08:38' , '09:30' ],
  [ '09:34' , '10:23' ],
  [ '10:27' , '11:16' ],
  [ '11:20' , '12:38' ],
  [ '12:42' , '15:55' ],
  [ '07:00' , ]
];
updateTimePeriods();
setInterval(updateTimePeriods, 1000); // Update every second
function updateTimePeriods() {
var listEl = document.getElementById('periods');
  var now = new Date();
  var count = periods.length;
 listEl.innerHTML='';
  
  for (var i = 0; i < count; i++) {
   if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
   child=listEl.appendChild(document.createElement('LI'));
    child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
        + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
       + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
       
  } 
  
  }
 }
 
 
function duration(start, end) {
  var startTime = parseTime(start);
  var endTime = parseTime(end);
  return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
  var nowTime = parseTime(formatTime(now));
  var endTime = parseTime(end);
  return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
  var tokens = timeStr.split(':');
  return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
  var date = new Date(time);
  return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
  var date = new Date(time);
  return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
  var sign = '+';
  if (time < 0) { time *= -1; sign = '–'; }
  var date = new Date(time);
  return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes())  + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
  text-align:center;
}
#periods {
  border-radius: 5px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold; 
  text-align: center;
  list-style-type: none;
}

<div class="outer-box">
  <ul id="periods"></ul>
</div>

我的目标仅向用户显示当前时间段剩下的时间而不是所有时间。如果它在一个时间段内，则显示下一个时间发生的时间。这个问题是一旦发生了所有时间，我需要告诉他很多时间，直到下一次发生在另一天开始。为了详细说明，目前，如果所有时间段发生，它将显示一个空白，因为没有什么可显示的，所有时间都是负面的。我想显示直到第二天开始时间的时间。

Answer 1

您应该在创建新的LI元素时打破for循环。这样，它只应显示实际的时间段。

for (var i = 0; i < count; i++) {
 if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
  child=listEl.appendChild(document.createElement('LI'));
  child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
     + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
     + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
  break;  
 }
}