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

Question

I'm having a jQuery Countdown ( http://www.littlewebthings.com/projects/countdown/ ) for a football match. When the countdown complete, it display oncomplete function.

I want the jQuery to change the 'Live' word inside the div to Full Time after 90 minutes from the Countdown Complete.

Here is the Code

<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

You could simply add 90 minutes to a date object using the following: var newDate = new Date(originalDate.getTime() + 90 * 60000);

Using this new date, you can then check if the current date matches or exceeds the newdate. Getting the current date is done through Date.now() . Adding this all up leads to the following:

// 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.
}

Inside the if-statement you can replace the div text. I would advise to use only one div and just replace the text; as opposed to having two seperate divs.

Answer 2

To build upon what @Matthjs said in the comments. This code would work well:

  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> 

This will check the if loop right when the time up.