Download: Source Code
Save the following script as “index.html”
<!--
##### Basic HTML Doctype statement #####-->
<!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">
<!--
##### Head block starts #####-->
<head>
<!--
##### Selects the default timezone #####-->
<?
date_default_timezone_set('Africa/Abidjan'); ?>
<!--
##### Javascript functions #####-->
<script type =
"text/javascript">
<!--
##### function h() for calculating current hour value #####-->
function h()
{
//today variable contains complete
date string
var
today = new Date();
//today.getHours() function fetches
only the hours from the date
var
h = today.getHours();
//it prints the hour in div with id
‘hours’
document.getElementById("hours").innerHTML
= h;
}
<!--
##### function m() for calculating current minute value #####-->
function m()
{
var
today = new Date();
//today.getMinutes()
function fetches only the minutes from the date
var
m = today.getMinutes();
//it prints
the minutes in div with id ‘minutes’
document.getElementById("minutes").innerHTML
= m;
}
<!--
##### function s() for calculating current second value #####-->
function s()
{
var
today = new Date();
//today.getSeconds()
function fetches only the seconds from the date
var
s = today.getSeconds();
//it prints
the seconds in div with id ‘seconds’
document.getElementById("seconds").innerHTML
= s;
}
<!--
##### function ms() for calculating current milli-second value #####-->
function ms()
{
var today
= new Date();
//today.getMilliseconds()
function fetches only the milli-seconds from the date
var
ms = today.getMilliseconds();
//it prints
the milli-seconds in div with id ‘mseconds’
document.getElementById("mseconds").innerHTML
= ms;
}
<!--
##### function time() calls the above four functions #####-->
function time()
{
h();
m();
s();
ms();
}
<!--
##### function update() calls the time() function in every .01 seconds means it
updates the time in every 0.01 second #####-->
function update()
{
//setInterval() function containing
two parameters par1 (function) and par2 (time-interval) calls par1 in every par2
milliseconds
setInterval("time()",10);
}
// for running the time() function first
time.
time();
</script>
<!--
##### link tag attaches the css stylesheet to the html to improve the look of
the page #####-->
<link rel="stylesheet" href="style.css"
/>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Clock</title>
</head>
<!--
##### update() function is called as soon as the page is loaded #####-->
<body onload="update();">
<!--
##### “header” block contains the Heading and any message you want to give. #####-->
<div class="header">
<div
id="sitename">Clock</div>
<div
id="content">Message : <? //echo $message; ?></div>
</div>
<div class="container">
<div
class="input" id="input">
<div
id="mainbox">
<div id="box">
<!-- ##### “hours” block is
left blank and is updated according to current hour. #####-->
<span id="hours"></span><br />
<span style="font-size:12px;">Hours</span>
</div>
<div style=" float:left; color:#FFF; margin:15px;"> :
</div>
<div id="box">
<!--
##### “minutes” block is left blank and is updated according to current minute
value. #####-->
<span
id="minutes"></span><br />
<span style="font-size:12px;">Minutes</span>
</div>
<div style=" float:left; color:#FFF; margin:15px;"> :
</div>
<div id="box">
<!--
##### “seconds” block is left blank and is updated according to current second
value. #####-->
<span id="seconds"></span><br />
<span style="font-size:12px;">Seconds</span>
</div>
<div style=" float:left; color:#FFF; margin:15px;"> :
</div>
<div id="box">
<!--
##### “mseconds” block is left blank and is updated according to current
millisecond value. #####-->
<span id="mseconds"></span><br />
<span style="font-size:12px;">Mili-Seconds</span>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span id="copy">© All rights
reserved.</span>
<span id="developer">Developed by: Aman
Dhanda</span>
</div>
</body>
</html>
------------------------------------------------------------------------
The
following is the style sheet is attached to the script. Save it as “style.css”
in the same folder. Its just for making your page attractive.
@charset "utf-8";
/* CSS Document */
body { overflow:hidden; background:#333; }
.header { height:100px; background:#CCC;
left:0px; right:0px; margin:-10px -10px 20px -10px; border-bottom:solid 2px
#999; }
#sitename { color:#225; font-size:24px;
font-family:Arial, Helvetica, sans-serif; margin:10px 0px 10px 40px;
padding:10px; }
#content { margin:10px 0px 10px 60px;
color:#666; font-size:16px; }
.container { margin:0 auto; width:700px;
padding:20px; }
.input { font-size:18px; color:#999; }
#mainbox {text-align:center; color:#003;
font-family:Arial, Helvetica, sans-serifet, sans-serif; font-weight:100;
font-size:36px;}
#box { float:left; text-align:center;
border:solid medium #EEE; background:#CCC; padding:10px 30px;}
input { border:solid thin #003; height:30px;
width:200px; font-size:18px; color:#030;
}
select { height:30px; font-size:18px;
color:#030; }
select#dd { width:50px; }
select#mm { width:150px; }
select#yyyy { width:100px; }
select#tz { width:300px; }
input#submit { height:30px; font-size:18px;
width:100px; color:#030; }
.footer { position:absolute; bottom:0px;
width:98%; color:#FFF; }
#copy { left:0px; float:left; }
#developer { right:0px; float:right; }
