Announcement

Collapse
No announcement yet.

jQuery JavaScript Countdown Timer with Bar Display

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery JavaScript Countdown Timer with Bar Display

    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


    How to setup

    Step 1: Copy & Paste CSS code below in your HEAD section
    CSS
    Code:
    <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: Use JavaScript code below to setup the script
    JavaScript
    Code:
    <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: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <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






Working...
X