« »

You are needing a beautiful/stylish Javascript countdown timer? And it must be easy to use & edit? Check out this JavaScript code now to see it in action. It meets your requirements, and maybe the best JavaScript countdown timer you ever use.

Label: super neat, JavaScript Countdown Timer, stylish, countdown timer, requirement

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
CSS
HTML
Print

digit.png

Copy All x2

<style type="text/css">
html {
 background:#222;
 height:100%;
}
body {
 font:normal 76% verdana,tahoma,arial;color:#fff;
}
a {
 color:#99ffff;
}
a:hover {
 color:#ffff00;
}
h1, h2 {
 font:normal 1em georgia,helvetica,arial;
 letter-spacing:-0.5px; /* it isn't web 2.0 otherwise, right? ;) */
}
p {
 margin:0.5em 0px 1.25em 0px;
 padding:0px;
 line-height:1.7em;
}

/*COUNTER SPECIFIC STYLES */
.counter{
	width: 610px;
}
.counter ul.countdown{
	list-style-type: none;
	color: white;
	font-weight: bold;
	text-align: center;
}
.counter ul.countdown li{
	float: left;
	background: url(digit.png) no-repeat;
	height:110px;
	width: 105px;
	padding-top: 15px;
}
.counter ul.countdown li div{
	font-size: 15px;
}
.counter ul.countdown li div.countdown_num{
	font-size: 48px;
}
.counter ul.countdown li.no_countdown{
	padding-top:4px;
	background:transparent;
	height:110px;
	width:180px;
}
</style>

Copy All x2

<div id="counter" class="counter">
		<ul class="countdown">
			<li><div class="countdown_num" id="countdown_day"></div><div>Days</div></li>
			<li><div class="countdown_num" id="countdown_hour"></div><div>Hours</div></li>
			<li><div class="countdown_num" id="countdown_min"></div><div>Minutes</div></li>
			<li><div class="countdown_num" id="countdown_sec"></div><div>Seconds</div></li>
		</ul>
	</div>
	<div id="expired" style="display:none;">
		The deadline has passed.
	</div>
<script type="text/javascript">
	/*
		Countdown Timer
		Based on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)
		Author: (c) 2009 Elbert Bautista
		URL: http://www.egTheBlog.com
		Licence : Open Source MIT Licence

	*/
	
	var current="Expired"
	var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

	function countdown(yr,m,d){
		theyear=yr;themonth=m;theday=d
		var today=new Date()
		var todayy=today.getYear()
		if (todayy < 1000)
		todayy+=1900
		var todaym=today.getMonth()
		var todayd=today.getDate()
		var todayh=today.getHours()
		var todaymin=today.getMinutes()
		var todaysec=today.getSeconds()
		var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
		futurestring=montharray[m-1]+" "+d+", "+yr
		dd=Date.parse(futurestring)-Date.parse(todaystring)
		dday=Math.floor(dd/(60*60*1000*24)*1)
		dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
		dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
		dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
		if(dday==0&&dhour==0&&dmin==0&&dsec==1){
			document.getElementById('counter').style.display='none';
			document.getElementById('expired').style.display='block';
			return
		}
		else{
			document.getElementById('countdown_day').innerHTML=dday;
			document.getElementById('countdown_hour').innerHTML=dhour;
			document.getElementById('countdown_min').innerHTML=dmin;
			document.getElementById('countdown_sec').innerHTML=dsec;
			setTimeout("countdown(theyear,themonth,theday)",1000)
		}
	}

	var deadline=new Date();
	deadline.setDate(deadline.getDate()+5);
	var deadlineYear = deadline.getYear();
	if (deadlineYear < 1000)
	deadlineYear+=1900
	//enter the count down date using the format year/month/day
	countdown(deadlineYear, deadline.getMonth()+1, deadline.getDate());
	</script>

Comment (3)
Write

by huy, 13/04/2010 06:04 PM
Reply

thanks, i need this tool

by e, 24/03/2011 10:03 PM
Reply

this is great! thanks

by alvin chan, 13/04/2011 08:04 PM
Reply

This is pretty cool script , thanks for sharing ...

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (2)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

CTRCoin.com Card.rip CryptoKD.com CreditCard.rip ChatTotal.com choose.exchange eChainBank.com choose.works system.money pornID.net ApexBTC.com ABP3.com ChainTutor.com ZWVQ.com YeuNu.com CoinHolo.com this.bid XMQV.com war.money index.services

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

02/04/2010
e.g.TheBlog [more]
15,296
3
30
2
0.04 KBytes

Super Neat JavaScript Countdown Timer

2.1/5 30 votes / 15,296 previews / 3 comment 02/04/2010 You are needing a beautiful/stylish Javascript countdown timer? And it must be easy to use & edit? Check out this Ja...Super Neat JavaScript Countdown Timer - Super Neat JavaScript Countdown Timer

jhjhjh99[4] popaj[3] naythi[3] jimmy001 formadigitale[6] Pike[3] thomaslaan[4] nguyenlinh279[2] nguoksiong[2] tammao[2]