事件的jQuery倒数计时器

时间:2014-10-27 18:05:15

标签: javascript jquery html countdown

这是我第一次在这里提问,所以我希望我做得对。

我正在为食堂的营业时间做倒计时。 这个食堂开放时间为7.45到12.45然后有一个休息时间,直到13.30。

我已将倒计时降至7.45,但我希望将倒计时重置为13.30,当他们在12.45休息时关闭。 周五,他们收于12.45,所以当天没有休息。

到目前为止,这是我的代码:

的index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>countdown Timer</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="countdown">
        <span class="days">00</span> Days
        <span class="hours">00</span> Hours
        <span class="mins">00</span> Minutes
        <span class="secs">00</span> Secounds
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/countdown.jquery.js"></script>
    <script type="text/javascript" src="js/ext.js"></script>
</body>
</html>

ext.js

$(document).ready(function() {
    $('#countdown').countdown({ date: '28 october 2014 7:45:00' }, function() {
        $('#countdown').text('The canteen is open :D')
    });
});

countdown.jquery.js

(function($) {
    $.fn.countdown = function(options, callback) {
        var settings = { 'date': null };
        if (options) {
            $.extend(settings, options);
        }

        this_sel = $(this);

        function count_exec(){
            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000)

            if (eventDate <= currentDate) {
                callback.call(this);
                clearInterval(interval);
            }

            seconds = eventDate - currentDate;

            days = Math.floor(seconds / (60*60*24));
            seconds -= days * 60 * 60 * 24;

            hours = Math.floor(seconds / (60*60));
            seconds -= hours * 60 * 60;

            minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60;

            days = (String(days).length <= 1) ? '0' + days : days;
            hours = (String(hours).length <= 1) ? '0' + hours : hours;
            minutes = (String(minutes).length <= 1) ? '0' + minutes : minutes;
            seconds = (String(seconds).length <= 1) ? '0' + seconds : seconds;

            if (!isNaN(eventDate)) {
                this_sel.find('.days').text(days);
                this_sel.find('.hours').text(hours);
                this_sel.find('.mins').text(minutes);
                this_sel.find('.secs').text(seconds);
            } else {
                document.getElementById("countdown").innerHTML = "Sorry, the countdown is not available";
            }
        }

        count_exec();
        interval = setInterval(count_exec, 1000);
    }
})(jQuery);

1 个答案:

答案 0 :(得分:1)

您可以有3个日期,7:45,12:45和13:30。如果当前日期是&lt; 7:45,然后显示倒计时开幕。如果当前日期&gt; 12:45显示倒计时到13:30。