Website Design United States, Website Design California, Website Designing United States, Website Designing California

Count Down Clock - JavaScript

A simple count down clock for a website.

The source code is actually a working page. You can copy, paste and save the file as a web page (.HTML). Open the saved file in a browser to see it in action. It is currently counting down to Christmas of 2005.


There are 2 lines that you will want to change for sure. 3 lines if you rename the form and input box which shows the clock.

The first line is for the variable end_time. See the script for notes on how the date should be entered. This is the time that you are counting down to.

The second line is for the variable end_time_show. This variable holds the text that will be shown when the count down reaches its mark.

If you are using this script on your website/webpage and you are placing it into a form that you already have on the page, make sure to note the line document.showtime.timeleft.value = full_time_left; may need to be changed to show the time in your form/input field.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Javascript - Count Down Clock</title>
<style type="text/css" media="all">
body{ margin: 20px auto; padding: 0; background: #ded; color: #000; text-align: center; font-size: 62.5%; }
body, h5, input, form{ font-family: Verdana, Helvetica, Arial, Sans-serif; }
h5{ margin: 0 0 10px 0; font-size: 1.3em; }
form{ margin: 0; padding: 0; background-color: transparent; color: #333; }
#container{ margin: 0 auto; padding: 10px; background-color: #cdc; color: #333; border: 1px solid #9a9; width: 400px; }
input.show{ width: 375px; background-color: transparent; border-width: 0; text-align: center; vertical-align: center; font-size: 1em; }
</style>

<script type="text/javascript">
// Count Down Clock - JavaScript
// (c)2004 Dan Gronitz
//
// This code was for Programmer's Corner (http://www.programmers-corner.com/index.php)
// and can be used freely for personal (non-commercial) use as long as this notice
// remains with the code.
//
function run_clock(){
// Time should be in the format of either of the following:
// 1. December 25, 2005 -- OR -- Month Day, Year
// 2. December 25, 2005 -- OR -- Month Day, Year Hour:Minute:Second
// Hour should be 0-23 (0 - 12AM, 23 - 11PM)
// Minute and Second should be 0-59

var end_time = new Date("December 25, 2005 00:00:00");
var end_time_show = "The event has happened!";
// ***************************************************
// Edit the two lines above
// ***************************************************

 

var full_time_left = 0;
var current_Time = new Date();
var time_difference = end_time.getTime() - current_Time.getTime();

if(time_difference >= 0){
var days_left = Math.floor(time_difference / 1000 / 60 / 60 / 24);
time_difference = time_difference - days_left * 1000 * 60 * 60 * 24;
full_time_left = days_left + " Day";
if(days_left > 1 || days_left == 0){ full_time_left = full_time_left + "s"; }

var hours_left = Math.floor(time_difference / 1000 / 60 / 60);
time_difference = time_difference - hours_left * 1000 * 60 * 60;
full_time_left = full_time_left + " " + hours_left + " Hour";
if(hours_left > 1 || hours_left == 0){ full_time_left = full_time_left + "s"; }

var minutes_left = Math.floor(time_difference / 1000 / 60);
time_difference = time_difference - minutes_left * 1000 * 60;
full_time_left = full_time_left + " " + minutes_left + " Minute";
if(minutes_left > 1 || minutes_left == 0){ full_time_left = full_time_left + "s"; }

var seconds_left = Math.floor(time_difference / 1000);
full_time_left = full_time_left + " " + seconds_left + " Second";
if(seconds_left > 1 || seconds_left == 0){ full_time_left = full_time_left + "s"; }
}else{
full_time_left = end_time_show;
}

document.showtime.timeleft.value = full_time_left;
// ***************************************************
// Edit the line above
// ***************************************************

setTimeout('run_clock()',1000);
}

</script>

</head>
<body onload="run_clock()">

<div id="container">
<h5>Count Down Clock</h5>
<form name="showtime">
<input class="show" type="text" readonly="readonly" name="timeleft" />
</form>
</div>

</body>
</html>


WEB DESIGN INDIA
42 B Malviya Nagar , New Delhi-110017

Skype: manmeetsi
Email: support.webdesignindia@gmail.com
Tel: 91-011-40502005, 9810067295

 















 


© 2008-2009 dotnet4all.com