jQuery事件倒计时计时器

jQuery countdown timer for events

本文关键字：计时器 倒计时 事件 jQuery      更新时间：2023-09-26

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

我正在为我们食堂的营业时间做倒计时。这家餐厅从7点45分到12点45分开门，然后休息到13点30分。

我已经将倒计时设置为7.45，但我希望当他们在12.45休息时，将倒计时重置为13.30。星期五12点45分关门，所以当天没有休息。

这是我到目前为止的代码：

索引.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.query.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);

您可以有3个日期，7:45、12:45和13:30。如果当前日期是<7:45，然后显示开幕倒计时。如果当前日期>12:45，则显示13:30的倒计时。

相关文章：