Question

我试图制作一张EPG，当当前时间到达＆＃34; endtime＆＃34;时，它会自动更新。

我的代码基本上看起来像这样......对不起＆＃39;回合丑陋的标记。

<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.php tv2.php和tv3.php中的内容加载到相应的<span>＆＃中39; s与相应的id＆＃39; s？

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

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

1 个答案: