Military Clock : Clock : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Clock »

 

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 - + cHgt * 1.7 * Math.sin(i*e1*Math.PI/180+ pix;
 h24[i].left = x - + 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 - + cHgt * 1.2 * Math.sin(i*e2*Math.PI/180+ pix;
 h12[i].left = x - + 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>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Clock