JavaScript时间量

Question

I'm currently working on a project that will display the amount of time left in a certain time period based on the users current time. Here is the code.

 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> 

My goal is only display to the user the amount of time left in the current time period instead of all of them. And if its in between a time period it shows the amount of time until the next one occurs. The issue is once all the times occur I need to tell him much time until the start of the next time which occurs on a different day. To elaborate, currently if all the time periods occur it displays a blank space because there is nothing to display and all the times are negative. I want to display the amount of time until the next days starting time.

Answer 1

You should break the for loop as you create the new LI element. This way it should only show the actual time period.

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