Announcement

Collapse
No announcement yet.

HTC-style JavaScript Countdown Timer with jQuery

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

  • HTC-style JavaScript Countdown Timer with jQuery

    If the JavaScript countdown timers are ever presented on [email protected] still do not satisfy you:

    - [URL="http://www.javascriptbank.com/cool-javascript-digital-countdown-with-jquery.html"]Cool JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Use CSS code below for styling the script
    CSS
    Code:
    <link rel="stylesheet" type="text/css" href="style.css" />
    Step 2: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    <script src="/javascript/jquery.js" type="text/javascript"></script>
    <script src="jquery.countdown.packed.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    $('#countdown').countdown({until:$.countdown.UTCDate(-8, 2011,  1 - 1, 1), format: 'DHMS', layout: 
    '<div id="timer">' + '<hr />'+
    	'<div id="timer_days" class="timer_numbers">{dnn}</div>'+
    	'<div id="timer_hours" class="timer_numbers">{hnn}</div>'+ 
    	'<div id="timer_mins" class="timer_numbers">{mnn}</div>'+
    	'<div id="timer_seconds" class="timer_numbers">{snn}</div>'+
    '<div id="timer_labels">'+
    	'<div id="timer_days_label" class="timer_labels">days</div>'+
    	'<div id="timer_hours_label" class="timer_labels">hours</div>'+
    	'<div id="timer_mins_label" class="timer_labels">mins</div>'+
    	'<div id="timer_seconds_label" class="timer_labels">secs</div>'+
    '</div>'+							
    '</div>'					  
    });
    });
    </script>
    Step 3: Place HTML below in your BODY section
    HTML
    Code:
    <div id="countdown"></div>
    Step 4: downloads
    Files
    countdown1.png
    countdown2.png
    jquery.countdown.packed.js
    style.css






Working...
X