pastebin.parentNode.org » Viewing Paste

Pasted

by Countdown

on 2010-02-05 00:04

as HTML

Create New

http://pastebin.parentnode.org/

Links this one

http://pastebin.parentnode.org/103403

Comment

Simple countdown timer in Javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Your title here</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
	<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				text-align: center;
				font-family: Verdana, Arial, Helvetica;
				font-size: 12pt;
				background-color: #000;
				color: #FFF;
			}
			
			.countdown {
				font-size: 15pt;
				font-weight: bold;
			}
			
			#wrapper {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 600px;
				height: 200px;
				margin-top: -100px;
				margin-left: -300px;
			}
	</style>
	
	<script type="text/javascript">
		function createCountdown(end_year, end_month, end_day, end_hours, end_minutes, end_seconds, element_id) {
			var beginning, end, remaining, days_in_month, remaining_years, remaining_months;
			var remaining_days, remaining_hours, remaining_minutes, remaining_seconds;
			
			beginning = new Date().getTime();
			end = new Date(end_year, end_month, end_day, end_hours, end_minutes, end_seconds).getTime();
			if(end < beginning) {
				document.getElementById(element_id).innerHTML = "This date has already passed.";
				return;
			}
			remaining = end - beginning;
			
			days_in_month = 32 - new Date(end_year, end_month, 32).getDate();
			
			remaining_years   = Math.floor(remaining / 1000 / 60 / 60 / 24 / days_in_month / 12);
			remaining_months  = Math.floor(remaining / 1000 / 60 / 60 / 24 / days_in_month) % 12;
			remaining_days    = Math.floor(remaining / 1000 / 60 / 60 / 24) % days_in_month;
			remaining_hours   = Math.floor(remaining / 1000 / 60 / 60) % 24;
			remaining_minutes = Math.floor(remaining / 1000 / 60) % 60;
			remaining_seconds = Math.floor(remaining / 1000) % 60;
			
			document.getElementById(element_id).innerHTML = "<i>" + 
				printDate(end_year, end_month, end_day, end_hours, end_minutes, end_seconds) + "<\/i><br><br>\n";
			document.getElementById(element_id).innerHTML = document.getElementById(element_id).innerHTML + 
				remaining_years + " years, " + remaining_months + " months, " + remaining_days + 
				" days, <br>\n" + remaining_hours + " hours, " + remaining_minutes + " minutes and " + 
				remaining_seconds + " seconds remaining.";
		}
		
		function printDate(year, month, day, hours, minutes, seconds) {
			var string_month, string_day, string_hours, string_minutes, string_seconds;
			
			switch(month) {
				case 0: string_month = "January";
						break;
				case 1: string_month = "February";
						break;
				case 2: string_month = "March";
						break;
				case 3: string_month = "April";
						break;
				case 4: string_month = "May";
						break;
				case 5: string_month = "June";
						break;
				case 6: string_month = "July";
						break;
				case 7: string_month = "August";
						break;
				case 8: string_month = "September";
						break;
				case 9: string_month = "October";
						break;
				case 10: string_month = "November";
						break;
				case 11: string_month = "December";
						break;
			}
			
			switch(day % 10) {
				case 1: string_day = day + "st";
						break;
				case 2: string_day = day + "nd";
						break;				
				case 3: string_day = day + "rd";
						break;				
				default: string_day = day + "th";
						 break;
			}
			
			if(hours < 10) {
				string_hours = "0" + hours;
			}
			if(minutes < 10) {
				string_minutes = "0" + minutes;
			}
			if(seconds < 10) {
				string_seconds = "0" + seconds;
			}			
			
			return "Goal: " + string_month + " " + string_day + " " + year + " - " + 
				string_hours + ":" + string_minutes + ":" + string_seconds;
		}
	</script>
</head>
<body>
	<div id="wrapper">
		I can't wait!<br><br>
		
		<div class="countdown" id="countdown1">
			<script type="text/javascript">
				//the parameters are as following: Year, Month (Caution: it is zero-based, meaning that 0 is January and 11 is December), Day (not zero-based), hours, minutes, seconds
				//and the id of the parent div (in this case: "countdown1")
				//the first call of the function createCountdown is when the page has loaded and from that on it updates every second.
				//Both have to be the same date!
				createCountdown(2010, 1, 5, 04, 06, 07, "countdown1");
				setInterval('createCountdown(2010, 1, 5, 04, 06, 07, "countdown1");', 1000);		
			</script>
			<noscript><div>Sorry, you have to activate JavaScript for this.</div></noscript>
		</div>
	</div>
</body>
</html>