Military Clock
//Military Clock - http://www.btinternet.com/~kurt.grigg/javascript
/*
Paste this link where you want the clock to appear on your page.
<script type="text/javascript" src="militaryclock.js"></script>
To edit, right click on the militaryclock.js file icon and choose edit.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Free Position Military Clock</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body{
background:#000000;
}
//-->
</style>
</head>
<body>
<script type="text/javascript">
//Military Clock - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure the clock colours and size here.
var fCol = '#666666'; //face colour.
var dCol = '#666666'; //dot colour.
var hCol = '#00ff00'; //hours colour.
var mCol = '#0000ff'; //minutes colour.
var sCol = '#ff0000'; //seconds colour.
var cHgt = 50; //clock height.
var cWdh = 50; //clock width.
//If used inside a table td, its minimum width should
//be cWdh x 4. Netscape td's do not auto expand!
//End.
var y = cHgt * 2;
var x = cWdh * 2;
var h = 7;
var m = 5;
var s = 5;
var face24 = "06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 0 01 02 03 04 05";
face24 = face24.split(" ");
var n1 = face24.length;
var face12 = "15 20 25 30 35 40 45 50 55 0 5 10";
face12 = face12.split(" ");
var n2 = face12.length;
var e1 = 360/n1;
var e2 = 360/n2;
var e3 = 360/60;
var hHgt = cHgt/4;
var hWdh = cWdh/4;
var h24 = [];
var d1 = [];
var h12 = [];
var d2 = [];
var vh = [];
var vm = [];
var vs = [];
var pix = "px";
var idx = document.getElementsByTagName('div').length;
document.write('<div style="position:relative;width:'+((x*2))+'px;height:'+((y*2))+'px;">');
for (i=0; i < n1; i++){
document.write('<div id="hour24'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;'
+'text-align:center;font-family:verdana,arial,sans-serif;font-size:10px;color:'+fCol+'">'+face24[i]+'<\/div>');
document.write('<div id="dots1'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+dCol+'"><\/div>');
}
for (i=0; i < n2; i++){
document.write('<div id="hour12'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;'
+'text-align:center;font-family:verdana,arial,sans-serif;font-size:10px;color:'+fCol+'">'+face12[i]+'<\/div>');
}
for (i=0; i < 12; i++){
document.write('<div id="dots2'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+dCol+'"><\/div>');
}
for (i=0; i < h; i++){
document.write('<div id="H'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+hCol+'"><\/div>');
}
for (i=0; i < m; i++){
document.write('<div id="M'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+mCol+'"><\/div>');
}
for (i=0; i < s; i++){
document.write('<div id="S'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+sCol+'"><\/div>');
}
document.write('<\/div>');
function MilClock(){
var time = new Date();
var secs = time.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){
secOffSet = secs+45;
}
var sec = Math.PI * (secOffSet/30);
var mins = time.getMinutes();
var minOffSet = mins - 15;
if (mins < 15){
minOffSet = mins+45;
}
var min = Math.PI * (minOffSet/30);
var hrs = time.getHours();
var hrOffSet = hrs - 6;
if (hrs < 6){
hrOffSet = hrs+18;
}
var hr = Math.PI * (hrOffSet/12) + Math.PI * time.getMinutes()/720;
for (i=0; i < s; i++){
vs[i].top = y + (i*hHgt) * Math.sin(sec) + pix;
vs[i].left = x + (i*hWdh) * Math.cos(sec) + pix;
}
for (i=0; i < m; i++){
vm[i].top = y + (i*hHgt) * Math.sin(min) + pix;
vm[i].left = x + (i*hWdh) * Math.cos(min) + pix;
}
for (i=0; i < h; i++){
vh[i].top = y + (i*hHgt) * Math.sin(hr) + pix;
vh[i].left = x + (i*hWdh) * Math.cos(hr) + pix;
}
setTimeout(MilClock,100);
}
function init(){
for (i=0; i < n1; i++){
h24[i] = document.getElementById("hour24"+(idx+i)).style;
h24[i].top = y - 6 + cHgt * 1.7 * Math.sin(i*e1*Math.PI/180) + pix;
h24[i].left = x - 6 + cWdh * 1.7 * Math.cos(i*e1*Math.PI/180) + pix;
d1[i] = document.getElementById("dots1"+(idx+i)).style;
d1[i].top = y + cHgt * 1.5 * Math.sin(i*e1*Math.PI/180) + pix;
d1[i].left= x + cWdh * 1.5 * Math.cos(i*e1*Math.PI/180) + pix;
}
for (i=0; i < n2; i++){
h12[i] = document.getElementById("hour12"+(idx+i)).style;
h12[i].top = y - 6 + cHgt * 1.2 * Math.sin(i*e2*Math.PI/180) + pix;
h12[i].left = x - 6 + cWdh * 1.2 * Math.cos(i*e2*Math.PI/180) + pix;
}
for (i=0; i < 12; i++){
d2[i] = document.getElementById("dots2"+(idx+i)).style;
d2[i].top = y + cHgt * Math.sin(i*e2*Math.PI/180) + pix;
d2[i].left= x + cWdh * Math.cos(i*e2*Math.PI/180) + pix;
}
for (i=0; i < h; i++){
vh[i] = document.getElementById("H"+(idx+i)).style;
}
for (i=0; i < m; i++){
vm[i] = document.getElementById("M"+(idx+i)).style;
}
for (i=0; i < s; i++){
vs[i] = document.getElementById("S"+(idx+i)).style;
}
MilClock();
}
if (window.addEventListener){
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onload",init);
}
})();
}//End.
</script>
</body>
</html>
Related examples in the same category
