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

Question

我正在为一场足球比赛准备一个 jQuery Countdown (http://www.littlewebthings.com/projects/countdown/)。倒计时完成后，显示oncomplete函数。

我希望 jQuery 在倒计时完成 90 分钟后将 div 内的“Live”字样更改为 Full Time。

这是代码

<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 在 cmets 中所说的内容为基础。这段代码会很好用：

    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";
     }   
     }

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

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