Search code examples
javascriptjqueryhtmlcountdown

jQuery countdown timer for events


this is the first time I ask a question in here, so i hope i do it right.

I am building a countdown for our canteen's opening hours. This canteen opens at 7.45 to 12.45 and then has a break untill 13.30.

I have made the countdown to 7.45, but I would like the reset the countdown to 13.30 when they close for a break at 12.45. On fridays they close at 12.45, so no break that day.

Here is my code so far:

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);

Solution

  • You can have 3 dates, 7:45, 12:45 and 13:30. If current date is < 7:45, then show countdown to opening. If current date > 12:45 show countdown to 13:30.