Javascript 负电荷时拆下元件

我的目标是只向用户显示当前期间中剩余的时间。目前，它显示了所有的时段持续时间和时间铰孔，我只想显示一个，这是他们目前的时间框架。

var期间=[
[ '07:45' , '08:34' ],
[ '08:38' , '09:30' ],
[ '09:34' , '10:23' ],
[ '10:27' , '11:16' ],
[ '11:20' , '12:38' ],
[ '12:42' , '13:31' ],
[ '13:35' , '14:25' ]
];
生成周期（）；
updateTimePeriods（）；
setTimeout（updateTimePeriods，1000）；//每秒钟更新一次
函数生成周期（）{
var listEl=document.getElementById（'periods'）；
periods.forEach（函数（period）{
appendChild（document.createElement（'LI'））；
});
}
函数updateTimePeriods（）{
var now=新日期（）；
var children=document.getElementById（'periods'）.childNodes；
var i=0；
对于（变量i=0；i持续时间：'+formatUTCTime（持续时间（期间[i][0]，期间[i][1]））
+“，剩余：”+formatTimeLeving（timeLeft（现在是periods[i][1]））；
}
}
功能持续时间（开始、结束）{
var startTime=解析时间（开始）；
var endTime=parseTime（end）；
返回endTime.getTime（）-startTime.getTime（）；
}
函数timeLeft（现在，结束）{
var nowTime=parseTime（formatTime（now））；
var endTime=parseTime（end）；
返回endTime.getTime（）-nowTime.getTime（）；
}
函数解析时间（timeStr）{
var tokens=timeStr.split（“：”）；
返回新日期（1970,0,1,parseInt（令牌[0]，10]，parseInt（令牌[1]，10））；
}
函数formatUTCTime（时间）{
var日期=新日期（时间）；
返回padZero（date.getUTCHours（））+'：'+padZero（date.getUTCMinutes（））；
}
函数格式化时间（time）{
var日期=新日期（时间）；
返回padZero（date.getHours（））+'：'+padZero（date.getMinutes（））；
}
函数格式剩余时间（时间）{
变量符号='+'；
如果（时间<0）{time*=-1；符号='-'；}
var日期=新日期（时间）；
返回符号+padZero（date.getUTCHours（））+'：'+padZero（date.getUTCMinutes（））+'：'+padZero（date.getUTCSeconds（））；
}
函数padZero（n）{return（'00'+n）.substr（-2）；}

正文{
背景色：#A00000；
背景尺寸：封面；
保证金：0；
填充：0；
}
.外箱{
边框：3倍纯黑；
身高：真；
宽度：75%；
填充：10px；
保证金：10px自动10px自动；
边界半径：10px；
背景色：白色；
文本对齐：居中；
}
#时期{
边界半径：5px；
保证金：20px自动20px自动；
填充物：5px；
字体大小：粗体；
文本对齐：居中；
}

---

您可以使用以下代码片段检查时间：

for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var now = new Date();
    var nowHour = now.getHours();
    if(periods[i][0] > nowHour) {
        child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
            + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
           + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
    }
 }

for（变量i=0；inowHour）{
child.innerHTML=句点[i][0]+'-'+句点[i][1]
+'=>持续时间：'+formatUTCTime（持续时间（期间[i][0]，期间[i][1]））
+“，剩余：”+formatTimeLeving（timeLeft（现在是periods[i][1]））；
}
}

首先，我稍微改变了你的HTML，

li

应该是

ul

的孩子。 然后我删除了generatePeriods（）函数

如果不想显示所有句点（仅为正值），则不需要空的

li

元素

然后我稍微修改了updateTimePeriods（）函数：

    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)!='–') { // check if negative
       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]));

      } 
     }
   }