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

JavaScript时间量

1 个答案: