Javascript 更新多个<；span>'；s在特定时间内时单独使用<；span>'；s匹配当前时间

我正在尝试制作一个EPG，当当前时间到达“endtime”时，它应该会自动更新

我的代码基本上是这样的。。。对不起，这是个难看的标记

<span class="channel">
    <span class="channum">01</span>
    TV1
</span>
<span id="tv1" class="showing">
    <span class="starttime">22:30</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:50%"></span>
    </span>
    <br />
    <span class="endtime">23:00</span> Program Title
</span>

<span class="channel">
    <span class="channum">02</span>
    TV2
</span>
<span id="tv2" class="showing">
    <span class="starttime">22:15</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:0%"></span>
    </span>
    <br />
    <span class="endtime">23:30</span> 
    Program Title
</span>

<span class="channel">
    <span class="channum">03</span>
    TV3
</span>
<span id="tv3" class="showing">
    <span class="starttime">21:45</span> 
    Program Title
    <span class="progresscontainer">
        <span class="progressbar" style="width:75%"></span>
    </span>
    <br />
    <span class="endtime">22:30</span> 
    Program Title
</span>

---

希望有人能帮我。

这个

脚本将是一个好的开始。你需要调整它来考虑不同日期的开始/结束：

$(function() {
    var now = new Date();

    // For easy comparison.
    now.setSeconds(0);
    now.setMilliseconds(0);

    // For debugging.
    $('.now').text(now.getHours() + ':' + now.getMinutes());

    $('.showing').each(function(){
        // Finding out the start time.
        var start = new Date(
            now.getFullYear(), 
            now.getMonth(), 
            now.getDate(), 
            parseInt($(this).find('.starttime').text().split(':')[0], 10), 
            parseInt($(this).find('.starttime').text().split(':')[1], 10), 
            0, 
            0);

        // Finding out the end time.
        var end = new Date(
            now.getFullYear(),
            now.getMonth(), 
            now.getDate(),
            parseInt($(this).find('.endtime').text().split(':')[0], 10), 
            parseInt($(this).find('.endtime').text().split(':')[1], 10), 
            0, 
            0);

        if (now <= end && now >= start) {        
            var epg = $(this).attr('id') + '.php';

            // Removed for debugging.
            //$(this).load(epg);

            // For debugging.
            $(this).html('<b>' + epg + '</b>');
        }
    });
});

$（函数（）{
var now=新日期（）；
//为了便于比较。
现在。设置秒（0）；
now.setms（0）；
//用于调试。
$（'.now'）.text（now.getHours（）+'：'+now.getMinutes（））；
$（'.showing'）。每个（函数（）{
//找出开始时间。
var start=新日期(
现在。getFullYear（），
现在。getMonth（），
现在。getDate（），
parseInt（$（this）.find（'.starttime'）.text（）.split（'：'）[0]，10），
parseInt（$（this.find（'.starttime'）.text（）.split（'：'）[1]，10），
0, 
0);
//找出结束时间。
var end=新日期(
现在。getFullYear（），
现在。getMonth（），
现在。getDate（），
parseInt（$（this）.find（'.endtime'）.text（）.split（'：'）[0]，10），
parseInt（$（this）.find（'.endtime'）.text（）.split（'：'）[1]，10），
0, 
0);
如果（现在=开始）{
var epg=$（this.attr（'id'）+'.php'；
//已删除以进行调试。
//$（此）.load（epg）；
//用于调试。
$（this.html（“”+epg+“”）；
}
});
});

提示：您的某个位置缺少open
span
标记。我数了七个open和close span标记。是的，我的错误。这是正确的。感谢@MelanciaUK-通过对脚本进行必要的调整，它可以完美地工作：）现在，需要添加到脚本中的所有内容是根据
开始时间
、
结束时间
和
现在
计算
进度条宽度的百分比。你能帮我解决这个问题吗？或者我应该就具体问题提出一个新问题吗？你应该提出一个新问题，以遵守SO规则/标准。：）您应该参考的内容：
$(function() {
    var now = new Date();

    // For easy comparison.
    now.setSeconds(0);
    now.setMilliseconds(0);

    // For debugging.
    $('.now').text(now.getHours() + ':' + now.getMinutes());

    $('.showing').each(function(){
        // Finding out the start time.
        var start = new Date(
            now.getFullYear(), 
            now.getMonth(), 
            now.getDate(), 
            parseInt($(this).find('.starttime').text().split(':')[0], 10), 
            parseInt($(this).find('.starttime').text().split(':')[1], 10), 
            0, 
            0);

        // Finding out the end time.
        var end = new Date(
            now.getFullYear(),
            now.getMonth(), 
            now.getDate(),
            parseInt($(this).find('.endtime').text().split(':')[0], 10), 
            parseInt($(this).find('.endtime').text().split(':')[1], 10), 
            0, 
            0);

        if (now <= end && now >= start) {        
            var epg = $(this).attr('id') + '.php';

            // Removed for debugging.
            //$(this).load(epg);

            // For debugging.
            $(this).html('<b>' + epg + '</b>');
        }
    });
});