Digital Clock : Clock « GUI Components « JavaScript DHTML
- JavaScript DHTML
- GUI Components
- Clock
Digital Clock
//Digital Clock - http://www.btinternet.com/~kurt.grigg/javascript
/*
Paste this js-link to where ever you want the clock to appear on your page.
<script type="text/javascript" src="digitalclock.js"></script>
Make sure ALL the images are in a folder/directory called exactly "digital" and
that it and the digitalclock.js file are in the same folder as the web page using
the script.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Digital Clock</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
</head>
<body style="background-color:#000000">
<script type="text/javascript">
//Digital Clock - http://www.btinternet.com/~kurt.grigg/javascript
(function(){
var load_pics = [];
var pics = [];
for(i = 0; i < 12; i++){
load_pics[i] = i+".gif";
}
for(i = 0; i < load_pics.length; i++){
pics[i] = new Image();
pics[i].src = "digital/"+load_pics[i];
}
var idx = document.images.length;
var get_digit_pos = -1;
var digit_pos = [];
var ini_src = [];
var pic_width = [];
for (i = 0; i < 8; i++){
var comma = (i == 2 || i == 5);
if (!comma){
get_digit_pos++;
}
ini_src[i] = (comma)?"digital/11.gif":"digital/10.gif";
pic_width[i] = (comma)?9:16;
digit_pos[i] = get_digit_pos;
if (digit_pos[i] == digit_pos[i-1]){
digit_pos[i] = "";
}
document.write("<img name='"+idx+"digits"+digit_pos[i]+"' src="+ini_src[i]+" height='21' width='"+pic_width[i]+"' alt=''/>")
}
function digitalclock(){
var x = new Date();
var s = x.getSeconds();
var m = x.getMinutes();
var h = x.getHours();
var the_time = ((h < 10)?"0"+h:h)+''+((m < 10)?"0"+m:m)+''+((s < 10)?"0"+s:s);
for (i = 0; i < the_time.length; i++){
document.images[idx+"digits"+i].src = pics[the_time.charAt(i)].src;
}
setTimeout(digitalclock,100);
}
digitalclock();
})();
</script>
</body>
</html>
digitalclock.zip( 4 k)Related examples in the same category