View Single Post
  #113  
Old 04-28-2011, 01:06 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default HTC-style JavaScript Countdown Timer with jQuery

If the JavaScript countdown timers are ever presented on jsB@nk 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: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<link rel="stylesheet" type="text/css" href="style.css" />
Step 2: Use JavaScript code below to setup the script
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: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="countdown"></div>
Step 4: must download files below
Files
countdown1.png
countdown2.png
jquery.countdown.packed.js
style.css






Reply With Quote