How to create a Digital Clock with JavaScript

December 16th, 2006

This is an example of a simple digital clock created with JavaScript. To make the code more clear I’ve put both the JavaScript code and the CSS code directly in the HTML document.
This is what the clock can look like:
Digital Clock

You can try the code yourself by copying it into a text editor and name the file for example digital-clock.htm.

If you want to use this digital clock script on your website I would recommend you to put both the JavaScript code and the CSS code in seperate files external to the HTML file. By doing so the filesize would be reduced and the clock could more easily change it’s function and/or style.

Here’s a copy of the the code for the example linked to above:

Copy of the Digital Clock Document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Digital Clock Example | WebPelican</title>
<meta name="keywords" content="digital clock" />
<meta name="description" content="Example of a digital clock created with JavaScript." />
<script type="text/javascript">
function digital_clock()
{
var date=new Date()
var hours=date.getHours()
var minutes=date.getMinutes()
var seconds=date.getSeconds()
/*
*Calls the addZero function to add a zero infront of minutes or seconds if they are below 10, i.e.
*to make it look like 12:07:09, not 12:7:9
*/
minutes=addZero(minutes)
seconds=addZero(seconds)
/*
*Puts hours in the element with the hours id,
*minutes in the element with the minutes id,
*and seconds in the element with the seconds id
*/
document.getElementById('hours')
.innerHTML = hours
document.getElementById('minutes')
.innerHTML = minutes
document.getElementById('seconds')
.innerHTML = seconds
/*
*Runs every half second
*/
setTimeout('digital_clock()', 500)
}
/*
Adds a zero infront of minutes or seconds
*/
function addZero(min_or_sec)
{
if (min_or_sec < 10)
{min_or_sec="0" + min_or_sec}
return min_or_sec
}
</script>
<style type="text/css">
<!--
/*Style Sheet*/
body,
html {
background:#eee url(/resources/images/bg.gif);background-repeat: repeat-x;
}
body {
padding:0 15px 15px;margin-top:15px;
color:#222;
}
#wrap {
position: relative;
}
#digital-clock {
border:1px solid #fff;
width:7em;
}
#digital-clock ul {
margin:0;
padding:0.1em;
background:#003366;
color:#FFF;
list-style-type:none;
text-align:center;
}
#digital-clock li {
display:inline;
padding:0;
margin:0;
}
-->
</style>
</head>
<body onload="digital_clock()">
<h1>Digital Clock</h1>
<div id="wrap">
<div id="digital-clock">
<ul>
<li id="hours"></li>
<li> :</li>
<li id="minutes"></li>
<li> :</li>
<li id="seconds"></li>
</ul>
</div>
</div>
</body>
</html>

Entry Filed under: JavaScript

Bookmark with del.icio.us

Digg it?

Links

Subscribe