Dynamic Countdown Player

Dynamic Countdown Player

Create a dynamic Countdown Player fitting anywhere into your web page. Simple configuration of fonts, colors, size etc.

Insert as many counters per web page as you like.

Simply use the green or blue generator to create the code. The green generator creates a date-countdown counting down to any date you wish. The blue generator creates a digit-countdown counting up or down.

No need to download any files.

IE4x/5x/6x, NS6x/7x, Opera 6x/7x.

Configuration

Step 1:
- Use the green generator below in order to create a Date-Countdown.
- Use the blue generator below in order to create a Digit-Countdown.
- Click green or blue button test to view the result between the green and blue generator.
- Click green or blue button code in order to create the code for your Countdown Player

Generator for Date-Countdown

future date the countdown player is referring to:

type of countdown player:

Generator for Digit-Countdown

Count from to

countdown-speed:

What happens after countdown?

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

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

// IMPORTANT:
// If you add this script to a script-library or a script-archive
// you have to insert a link to http://www.24fun.com 
// right into the webpage where the script will be displayed.

var futureyear=2004
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="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 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