Question

我正在为足球比赛进行jQuery倒计时（http://www.littlewebthings.com/projects/countdown/）。倒计时结束时，显示功能不完整。

我希望jQuery在倒计时完成90分钟后将div内的'实时'单词更改为全时。

这是代码

<div id="countdown">
    <div class="dash days_dash">
        <span class="dash_title">days</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>

    <div class="dash hours_dash">
        <span class="dash_title">hours</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>

    <div class="dash minutes_dash">
        <span class="dash_title">minutes</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>

    <div class="dash seconds_dash">
        <span class="dash_title">seconds</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
    </div>
</div>

<div class="message" id="complete" style="display: none;">Live</div>

<script language="javascript" type="text/javascript">
    jQuery(document).ready(function() {
        $('#countdown').countDown({
            targetDate: {
                'day':      11,
                'month':    4,
                'year':     2016,
                'hour':     13,
                'min':      0,
                'sec':      0
            },
            onComplete: function() { 
            $('#countdown').addClass('ended');
            $('#complete').slideDown(); 
            }
        });
    });
</script>

Answer 1

您只需使用以下内容向日期对象添加90分钟：var newDate = new Date(originalDate.getTime() + 90 * 60000);

使用此新日期，您可以检查当前日期是否匹配或超过新日期。获取当前日期是通过Date.now()完成的。添加这一点会导致以下结果：

// Original date = March 30 2016 14:00:00
var minutes = 90,
    originalDate = new Date(1459339200000);
    timedDate = new Date(originalDate.getTime() + minutes * 60000);

// timedDate = originalDate + 90 minutes.

if (Date.now() >= timedDate) {
    // We are now 90 minutes later
    // Replace div text.
}

在if-statement内，您可以替换div文本。我建议只使用一个div而只是替换文本;而不是有两个单独的div。

Answer 2

以@Matthjs在评论中所说的为基础。这段代码效果很好：

＆＃13;

    var specificDate = 1459346400000; //which is what March 30th 2016 is
    var timeleft = specificDate - Date.now();
    setInterval(update, timeleft);
    function update(){
    if (Date.now() >= specificDate) { 
    document.getElementById("output").innerHTML = "Time's Up";
     }   
     }

＆＃13;

<div id="output">Still got time!</div>

＆＃13;

这将在时间到时检查if循环。

在特定时间后更改div内的文本

2 个答案: