倒计时流

Question

我想要一个倒数计时器，它会自动倒计时到每天下午5点，而我不必每天更改代码中的日期。这是因为直播会在每天下午5点开始，并且可能会持续大约6/7小时。

在流媒体播放期间，我要么让计数器保持0天，0小时，0分钟和0秒，要么天，小时，分钟和秒钟消失，＆＃34; Stream现在直播！＆＃34;而是出现。

我目前正在使用Countdown Clock v1插件，该插件位于https://github.com/e-piksel/countdown

我目前的代码如下：

JavaScript：

(function ($) {
$.fn.countdown = function (options, callback) {
    var settings = $.extend({
        date: null,
        offset: null,
        day: 'Day',
        days: 'Days',
        hour: 'Hour',
        hours: 'Hours',
        minute: 'Minute',
        minutes: 'Minutes',
        second: 'Second',
        seconds: 'Seconds'
    }, options);

    // Throw error if date is not set
    if (!settings.date) {
        $.error('Date is not defined.');
    }

    // Throw error if date is set incorectly
    if (!Date.parse(settings.date)) {
        $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
    }

    // Save container
    var container = this;

    /**
     * Change client's local date to match offset timezone
     * @return {Object} Fixed Date object.
     */
    var currentDate = function () {
        // get client's current date
        var date = new Date();

        // turn date to utc
        var utc = date.getTime() + (date.getTimezoneOffset() * 60000);

        // set new Date object
        var new_date = new Date(utc + (3600000*settings.offset))

        return new_date;
    };

    /**
     * Main countdown function that calculates everything
     */
    function countdown () {
        var target_date = new Date(settings.date), // set target date
            current_date = currentDate(); // get fixed current date

        // difference of dates
        var difference = target_date - current_date;

        // if difference is negative than it's pass the target date
        if (difference < 0) {
            // stop timer
            clearInterval(interval);

            if (callback && typeof callback === 'function') callback();

            return;
        }

        // basic math variables
        var _second = 1000,
            _minute = _second * 60,
            _hour = _minute * 60,
            _day = _hour * 24;

        // calculate dates
        var days = Math.floor(difference / _day),
            hours = Math.floor((difference % _day) / _hour),
            minutes = Math.floor((difference % _hour) / _minute),
            seconds = Math.floor((difference % _minute) / _second);

            // fix dates so that it will show two digets
            days = (String(days).length >= 2) ? days : '0' + days;
            hours = (String(hours).length >= 2) ? hours : '0' + hours;
            minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
            seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

        // based on the date change the refrence wording
        var text_days = (days === 1) ? settings.day : settings.days,
            text_hours = (hours === 1) ? settings.hour : settings.hours,
            text_minutes = (minutes === 1) ? settings.minute : settings.minutes,
            text_seconds = (seconds === 1) ? settings.second : settings.seconds;

        // set to DOM
        container.find('.days').text(days);
        container.find('.hours').text(hours);
        container.find('.minutes').text(minutes);
        container.find('.seconds').text(seconds);

        container.find('.days_text').text(text_days);
        container.find('.hours_text').text(text_hours);
        container.find('.minutes_text').text(text_minutes);
        container.find('.seconds_text').text(text_seconds);
    };

    // start
    var interval = setInterval(countdown, 1000);
};

startTimer(172800);  // start again
}
})(jQuery); 

HTML：

<p><u>Time left until next stream:</u></p>
<ul id="example">
    <li><span class="days">00</span><p class="days_text">Days</p></li>
    <li class="seperator">:</li>
    <li><span class="hours">00</span><p class="hours_text">Hours</p></li>
    <li class="seperator">:</li>
    <li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li>
    <li class="seperator">:</li>
    <li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li>
</ul>

<script type="text/javascript">
    $('#example').countdown({
        date: '12/10/2014 17:00:00',
    }, function () {
        alert('Stream is live!');
    });
</script>

CSS：

ul#example {
    list-style: none;
    display: block;
    text-align: center;
}

ul#example li { display: inline-block; }

ul#example li span {
    font-size: 60px;
    font-weight: 300;
    line-height: 40px;
}

ul#example li.seperator {
    font-size: 60px;
    line-height: 30px;
    vertical-align: top;
}

ul#example li p {
    color: #a7abb1;
    font-size: 25px;
}

我对HTML / CSS / JavaScript有点新手，因为我已经将自己所知道的一切都告诉了自己。任何有关如何编辑此代码以使其按照我希望的方式运行的帮助都会有很大的帮助。

对于文字墙，您可以看到倒计时当前在http://oshi7.hol.es的工作情况