Full version: jsB@nk » Framework » jQuery » jQuery JavaScript Countdown Timer with Bar Display
URL: https://www.javascriptbank.com/jquery-javascript-countdown-timer-with-bar-display.html
This is really a cool JavaScript code example to display an amazing JavaScript countdown timer on your web pages. With the support of the powerful JavaScript framework - jQuery - you can set the point to count down in this JavaScript, then it will show a dynamic countdown timer with red bar. An unique JavaScript countdown timer to use.Check more JavaScript countdown timers on jsB@nk by yourself: - JavaScript Timer Countdown - JavaScript Countdown Timer 2 - Make a JavaScript Countdown Timer in OOP - How to create a simple JavaScript countdown timer
Full version: jsB@nk » Framework » jQuery » jQuery JavaScript Countdown Timer with Bar Display
URL: https://www.javascriptbank.com/jquery-javascript-countdown-timer-with-bar-display.html
<style type="text/css" media="screen">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/ #seconds-box,#minutes-box,#hours-box,#days-box { width: 222px; height: 30px; background: #eee; border: 1px solid #ccc; } #seconds-outer,#minutes-outer,#hours-outer,#days-outer { margin: 10px; width: 200px; height: 9px; border: 1px solid #aaa; background: #f3f3f3; } #seconds-inner,#minutes-inner,#hours-inner,#days-inner { height: 100%; width: 100%; background: #c00; } #seconds-count,#minutes-count,#hours-count,#days-count { float: left; font-size: 0.9em; margin-left: -200px; margin-top: 7px; } </style><script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/ function timeleft(timetype){ days=0;hours=0;mins=0; var e = new Date(2010,11,25,0,0,0); var now = new Date(); var left = e.getTime() - now.getTime(); left = Math.floor(left/1000); days = Math.floor(left/86400); left = left%86400; hours=Math.floor(left/3600); left=left%3600; mins=Math.floor(left/60); left=left%60; secs=Math.floor(left); switch(timetype){ case "s": return secs; break; case "m": return mins; break; case "h": return hours; break; case "d": return days; break; } } function set_start_count(){ set_hour_count(); set_minute_count(); set_day_count(); } function set_day_count(){ d=timeleft('d'); $('#days-count').text(d.toString() + ' day(s)'); } function set_hour_count(){ h=timeleft('h'); $('#hours-count').text(h.toString() + ' hour(s)'); } function set_minute_count(){ m = timeleft('m'); $('#minutes-count').text(m.toString()+ ' minute(s)'); } function set_second_count(){ s = timeleft('s'); $('#seconds-count').text(s.toString() + ' second(s)'); } function update_minute(){ var now = new Date(); var mw = $('#minutes-outer').css('width'); mw = mw.slice(0,-2); var s = now.getSeconds(); sleft = (60 - s) if (sleft == 0) { sleft=60; } m = ((sleft/60)*mw).toFixed(); $('#minutes-inner').css({width:m}); return sleft*1000; } function update_hour(){ var now = new Date(); var mw = $('#hours-outer').css('width'); mw = mw.slice(0,-2); var s = now.getMinutes(); sleft = 60 - s m = ((sleft/60)*mw).toFixed(); $('#hours-inner').css({width: m}); return sleft*(1000*60); } function update_day(){ var now = new Date(); var mw = $('#days-outer').css('width'); mw = mw.slice(0,-2); var s = now.getHours(); sleft = 24 - s m = ((sleft/24)*mw).toFixed(); $('#days-inner').css({width: m }); return sleft*(1000*60*24); } function reset_day(){ $('#days-inner').width($('#days-outer').width()); start_countdown_day(); } function reset_hour(){ $('#hours-inner').width($('#hours-outer').width()); start_countdown_hour(); } function reset_second(){ $('#seconds-inner').width($('#seconds-outer').width()); start_countdown_second(); } function reset_minute(){ $('#minutes-inner').width($('#minutes-outer').width()); start_countdown_minute(); } function start_countdown_second(){ set_second_count(); now = new Date(); $('#seconds-inner').animate({width: 0}, 1000,reset_second); } function start_countdown_minute(){ set_minute_count(); $('#minutes-inner').animate({width: 0}, update_minute(),reset_minute); //update_minute()); } function start_countdown_hour(){ set_hour_count(); $('#hours-inner').animate({width: 0},update_hour(),reset_hour); } function start_countdown_day(){ set_day_count(); $('#days-inner').animate({width: 0},update_day(),reset_day); } $(document).ready( function(){ start_countdown_second(); start_countdown_minute(); start_countdown_hour(); start_countdown_day(); });</script><center> <div id="days-box"> <div id="days-count"> </div> <div id="days-outer"> <div id="days-inner"> </div> </div> </div> <div id="hours-box"> <div id="hours-count"> </div> <div id="hours-outer"> <div id="hours-inner"> </div> </div> </div> <div id="minutes-box"> <div id="minutes-count"> </div> <div id="minutes-outer"> <div id="minutes-inner"> </div> </div> </div><div id="seconds-box"> <div id="seconds-count"> </div> <div id="seconds-outer"> <div id="seconds-inner"> </div> </div> </div></center>
/javascript/jquery.js