Dynamic Countdown Player

First Page Load Example Setting seen below is "how long until May, 01, 2020"

Online Generator to create dynamic countdowns
Use the online countdown generator below to create a dynamic digit or date countdown player that fits anywhere into your webpage. 4 different types to choose from. The generator works fine with Internet Explorer 6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x.

Configuration

Step 1:
- Use the green generator box below in order to create a date-countdown.
- Use the blue generator box below in order to create a digit-countdown.
- Click the Test My Code button to view the result of your custom countdown settings.
- Click the Generate Code button to create the code snippet for your countdown player.

- Please Note: In our countdown examples seen at the top and bottom of this page we have customized the script settings to show the full name of "hours, minutes and seconds" whereas the code you generate will have an abbreviated first letter for each of these time variables. If you would like to have full text words as we do here, simply look at our source code and customize your code snippet.

Generator for Date-Countdown

Future date the countdown player is referring to:

type of countdown player:

The code will be updated in the step 3 box below.

See yellow box at the top of this page for a live preview. You must click the "Test My Code" button in order to change the box above.

Generator for Digit-Countdown

Count from to

countdown-speed:

What happens after the countdown? (you can designate a URL forward if you like)

The code will be updated in the step 3 box below.

See yellow box at the top of this page for a live preview. You must click the "Test My Code" button in order to change the box above.

Step 2: Open your webpage in a text editor such as Notepad, WordPad etc.

Step 3: Insert the below code between the <head>-tag and </head>-tag of your webpage.

<script> 
// CREDITS:
// Dynamic Countdown Player
// by Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com & http://www.designerwiz.com
 
// IMPORTANT:
// If you add this script to a script-library or a script-archive
// you have to insert a link to http://www.fabulant.com 
// right into the webpage where the script will be displayed.
 
var futureyear=2010
var futuremonth=11
var futureday=24
var displaytype="showall"
var aftercountdown="stopit"
var digitordate="isdate"
var digitfrom=100
var digitto=1
var speed=1
 
var countdownid=new Array()
var futuredate
var nowdate
var resulthoursraw
var resulthours
var resultminutesraw
var resultminutes
var resultsecondsraw
var resultseconds
 
var p_seconds
var p_minutes
var p_hours
var p_days
 
var resultsecondsonly
var resultminutesonly
var resulthoursonly
var content
 
var i_countdown=-1
var countdownid
 
var step=1
speed*=1000
 
if (digitfrom>digitto) {step=-1}
if (digitfrom<digitto) {step=1}
 
var browserinfos=navigator.userAgent 
var ns4=document.layers
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)  
 
function setfuturedate() {
	futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
	if (digitordate=="isdigit") {content=digitfrom-step	}
	docountdown()
}
 
function docountdown() {
	if (digitordate=="isdate") {
		calculateresults()
		formatresults()
		displayresults()
		setTimeout("docountdown()",speed)
	}
	else if (digitordate=="isdigit") {
		content+=step	
		displayresults()
		if (content==digitto) {
			setTimeout("happensafter()",speed)
		}
		else {
			setTimeout("docountdown()",speed)
		}
	}
}
 
function firstcountdown() {
	if (digitordate=="isdate") {
		futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
		calculateresults()
		formatresults()
	}
	else if (digitordate=="isdigit") {
		content=digitfrom
	}
}
 
function calculateresults() {
nowdate=new Date()
resultdaysraw=(Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24
if (displaytype!="showall") {
	resultsecondsonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000)
	resultminutesonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60)
	resulthoursonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60)
}
else {
	resultdays=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24)
	resulthoursraw=(resultdaysraw-resultdays)*24
	resulthours=Math.floor((resultdaysraw-resultdays)*24)
	resultminutesraw=(resulthoursraw-resulthours)*60
	resultminutes=Math.floor((resulthoursraw-resulthours)*60)
	resultsecondsraw=(resultminutesraw-resultminutes)*60
	resultseconds=Math.floor((resultminutesraw-resultminutes)*60)
	}
}
 
function formatresults() {
	if (displaytype=="showall") {
		if (resultdays>1) {p_days="d"}
		else {p_days="d"}
		if (resultminutes<10) {resultminutes="0"+resultminutes}
		if (resultseconds<10) {resultseconds="0"+resultseconds}
		content=resultdays+" "+p_days+" "+resulthours+"h "+resultminutes+"m "+resultseconds +"s"
	}
	else if (displaytype=="showdays") {
		if (resultdays>1) {p_days="days"}
		else {p_days="day"}
		content=resultdays+" "+p_days
	}
	else if (displaytype=="showhours") {
		content=resulthoursonly+" hrs"
	}
	else if (displaytype=="showminutes") {
		content=resultminutesonly+" min"
	}
	else if (displaytype=="showseconds") {
		content=resultsecondsonly+" sec"
	}
}
 
function happensafter() {
	if (aftercountdown=="repeatit") {
		if (digitordate=="isdigit") {content=digitfrom-step}
		docountdown()
	}
	if (aftercountdown!="stopit" && aftercountdown!="repeatit") {
		document.location.href=aftercountdown
	}
}
 
function displayresults() {
	if (ie4) {
		for (i=0;i<=countdownid.length-1;i++) {
			var thisclock=eval(countdownid[i])
			thisclock.innerHTML=content
		}
	}
	else {
		for (i=0;i<=countdownid.length-1;i++) {
			document.getElementById(countdownid[i]).innerHTML=content
		}
	}
}
 
function setcountdown() {
	if (ns4 || ie4 || ie5 || ns6 || opera) {
		firstcountdown()
		i_countdown++
		countdownid[i_countdown]="countdown"+i_countdown
		document.write("<span id='"+countdownid[i_countdown]+"' style='position:relative'>"+content+"</span>")
	}
}
 
if (ie4 || ie5 || ns6 || opera) {
	onload=setfuturedate
}
</script>

Step 4: Insert the below code where you want the countdown player to appear on your page.

Step 5: In order to set the style (font, colors, size) just wrap the corresponding tags around the code. See CSS-sample below:

<span style="font-family:Verdana;font-size:12pt;color:#006600;border:1pt solid #006600;padding:2px;background-color:#DDFFDD"">
<script>setcountdown()</script>
</span>

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL:

var countdownid=new Array()
var futuredate
var nowdate
var resulthoursraw
var resulthours
var resultminutesraw
var resultminutes
var resultsecondsraw
var resultseconds
 
var p_seconds
var p_minutes
var p_hours
var p_days
 
var resultsecondsonly
var resultminutesonly
var resulthoursonly
var content
 
var i_countdown=-1
var countdownid
 
var step=1
speed*=1000
 
if (digitfrom>digitto) {step=-1}
if (digitfrom<digitto) {step=1}
 
var browserinfos=navigator.userAgent 
var ns4=document.layers
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)  
 
function setfuturedate() {
	futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
	if (digitordate=="isdigit") {content=digitfrom-step	}
	docountdown()
}
 
function docountdown() {
	if (digitordate=="isdate") {
		calculateresults()
		formatresults()
		displayresults()
		setTimeout("docountdown()",speed)
	}
	else if (digitordate=="isdigit") {
		content+=step	
		displayresults()
		if (content==digitto) {
			setTimeout("happensafter()",speed)
		}
		else {
			setTimeout("docountdown()",speed)
		}
	}
}
 
function firstcountdown() {
	if (digitordate=="isdate") {
		futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
		calculateresults()
		formatresults()
	}
	else if (digitordate=="isdigit") {
		content=digitfrom
	}
}
 
function calculateresults() {
nowdate=new Date()
resultdaysraw=(Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24
if (displaytype!="showall") {
	resultsecondsonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000)
	resultminutesonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60)
	resulthoursonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60)
}
else {
	resultdays=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24)
	resulthoursraw=(resultdaysraw-resultdays)*24
	resulthours=Math.floor((resultdaysraw-resultdays)*24)
	resultminutesraw=(resulthoursraw-resulthours)*60
	resultminutes=Math.floor((resulthoursraw-resulthours)*60)
	resultsecondsraw=(resultminutesraw-resultminutes)*60
	resultseconds=Math.floor((resultminutesraw-resultminutes)*60)
	}
}
 
function formatresults() {
	if (displaytype=="showall") {
		if (resultdays>1) {p_days="days"}
		else {p_days="day"}
		if (resultminutes<10) {resultminutes="0"+resultminutes}
		if (resultseconds<10) {resultseconds="0"+resultseconds}
		content=resultdays+" "+p_days+" "+resulthours+"h "+resultminutes+"m "+resultseconds +"s"
	}
	else if (displaytype=="showdays") {
		if (resultdays>1) {p_days="days"}
		else {p_days="day"}
		content=resultdays+" "+p_days
	}
	else if (displaytype=="showhours") {
		content=resulthoursonly+" hrs"
	}
	else if (displaytype=="showminutes") {
		content=resultminutesonly+" min"
	}
	else if (displaytype=="showseconds") {
		content=resultsecondsonly+" sec"
	}
}
 
function happensafter() {
	if (aftercountdown=="repeatit") {
		if (digitordate=="isdigit") {content=digitfrom-step}
		docountdown()
	}
	if (aftercountdown!="stopit" && aftercountdown!="repeatit") {
		document.location.href=aftercountdown
	}
}
 
function displayresults() {
	if (ie4) {
		for (i=0;i<=countdownid.length-1;i++) {
			var thisclock=eval(countdownid[i])
			thisclock.innerHTML=content
		}
	}
	else {
		for (i=0;i<=countdownid.length-1;i++) {
			document.getElementById(countdownid[i]).innerHTML=content
		}
	}
}
 
function setcountdown() {
	if (ns4 || ie4 || ie5 || ns6 || opera) {
		firstcountdown()
		i_countdown++
		countdownid[i_countdown]="countdown"+i_countdown
		document.write("<span id='"+countdownid[i_countdown]+"' style='position:relative'>"+content+"</span>")
	}
}
 
if (ie4 || ie5 || ns6 || opera) {
	onload=setfuturedate
}
</script>