JavaScriptの金額

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