Skip to content
Skip to search - Accesskey = s
parentNode.org
The building blocks of a solid frontend.
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><!--People who turned JavaScript off in their browser see this text--> </div> </div> </body> </html>