»
EnglishFrenchVietnamese

Print - jQuery JavaScript Countdown Timer with Bar Display - JavaScriptBank.com

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

jQuery JavaScript Countdown Timer with Bar Display © JavaScriptBank.comThis 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



CSS
<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>


JavaScript
<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>


HTML
<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>


Files
/javascript/jquery.js