javascript - jQuery countdown timer for events -
this first time inquire question in here, hope right.
i building countdown our canteen's opening hours. canteen opens @ 7.45 12.45 , has break untill 13.30.
i have made countdown 7.45, reset countdown 13.30 when close break @ 12.45. on fridays close @ 12.45, no break day.
here code 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 oct 2014 7:45:00' }, function() { $('#countdown').text('the canteen 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, countdown not available"; } } count_exec(); interval = setinterval(count_exec, 1000); } })(jquery);
you can have 3 dates, 7:45, 12:45 , 13:30. if current date < 7:45, show countdown opening. if current date > 12:45 show countdown 13:30.
javascript jquery html countdown
No comments:
Post a Comment