GUI Components JavaScript DHTML

//Military Clock - http://www.btinternet.com/~kurt.grigg/javascript
/*
Paste this link where you want the clock to appear on your page.

To edit, right click on the militaryclock.js file icon and choose edit.
*/



Free Position Military Clock










//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('');
for (i=0; i < n1; i++){
document.write('+'text-align:center;font-family:verdana,arial,sans-serif;font-size:10px;color:'+fCol+'">'+face24[i]+'<\/div>');
document.write('+'width:2px;height:2px;font-size:2px;background-color:'+dCol+'"><\/div>');
}
for (i=0; i < n2; i++){
document.write('+'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('+'width:2px;height:2px;font-size:2px;background-color:'+dCol+'"><\/div>');
}
for (i=0; i < h; i++){
document.write('+'width:2px;height:2px;font-size:2px;background-color:'+hCol+'"><\/div>');
}
for (i=0; i < m; i++){
document.write('+'width:2px;height:2px;font-size:2px;background-color:'+mCol+'"><\/div>');
}
for (i=0; i < s; i++){
document.write('+'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.