[JavaScriptBank]

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... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript jQuery JavaScript Countdown Timer with Bar Display

How to setup

Step 1: Use CSS code below for styling the script
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>

Step 2: Copy & Paste JavaScript code below in your HEAD section
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>

Step 3: Place HTML below in your BODY section
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>

Step 4: downloads
Files
jquery.js

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow