当 <span> 中的特定时间与当前时间匹配时，单独更新多个 <span>

Question

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

我的代码基本上看起来像这样......对不起，丑陋的标记。

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

如何比较<span class="endtime">内部的时间与当前时间，并将tv1.phptv2.php和tv3.php中的内容加载到各自的<span>和对应的id中？

我在 jquery 方面不是那么强，所以这就是我目前所拥有的。

$(document).ready(function() {
    var d = new Date();
    var hh = d.getHours();
    var mm = d.getMinutes();
    if (hh < 10) {hh = '0' + hh;}
    if (mm < 10) {mm = '0' + mm;}
    var time = hh + ':' + mm;

    $('.showing').each(function(){
        var epg = $(this).attr('id') + '.php';
        $(this).load(epg);
    });
});

希望有人能帮帮我。

Answer 1

这个script 将是一个好的开始。您需要调整它以考虑节目在不同日期开始/结束：

$(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>');
        }
    });
});

Demo