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