Standard Clock : Clock « GUI Components « JavaScript DHTML






Standard Clock

//Standard Analogue 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="standardclock.js"></script>

To edit the colours, right click on the standardclock.js file icon and choose edit.

Make sure the standardclock.js file is in/uploaded to the same directory/folder as 
the web page using it!

The height & width of the clock are both 100 pixils - px. This should be the 
minimum h & w of any <td> or <div> as Netscape does not automatically expand 
them in standards mode!


*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Standard analogue 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">

<style type="text/css">
<!--
body{
background-color : #000000;
}
//-->
</style>

</head>
<body>



<script type="text/javascript">
//Standard Analogue Clock - http://www.btinternet.com/~kurt.grigg/javascript

if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(function(){

var fCol="#00ff00"; //face colour.
var dCol="#ffffff"; //dots colour.
var hCol="#ff0000"; //hours colour.
var mCol="#ffffff"; //minutes colour.
var sCol="#00ff00"; //seconds colour.

//Alter nothing below! Alignments will be lost!

var dial = "3 4 5 6 7 8 9 10 11 12 1 2";
dial = dial.split(" ");
var e = 360/dial.length;
var h = 3;
var m = 4;
var s = 5;
var y = 50;
var x = 50;
var cyx = 30/4;
var theDial = [];
var theDots = [];
var theHours = [];
var theMinutes = [];
var theSeconds = [];
var idx = document.getElementsByTagName('div').length;
var pix = "px";

document.write('<div style="position:relative;width:'+(x*2)+'px;height:'+(y*2)+'px">');

for (i=0; i < dial.length; i++){
document.write('<div id="F'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;'
+'font-family:arial,sans-serif;font-size:10px;color:'+fCol+';text-align:center">'+dial[i]+'<\/div>');

document.write('<div id="D'+(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 clock(){
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();
if (hrs > 12){
 hrs -= 12;
}
var hrOffSet = hrs - 3;
if (hrs < 3){ 
 hrOffSet = hrs+9;
}
var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;

for (i=0; i < s; i++){
 theSeconds[i].top = y + (i*cyx) * Math.sin(sec) + pix;
 theSeconds[i].left = x + (i*cyx) * Math.cos(sec) + pix;
}
for (i=0; i < m; i++){
 theMinutes[i].top = y + (i*cyx) * Math.sin(min) + pix;
 theMinutes[i].left = x + (i*cyx) * Math.cos(min) + pix;
}
for (i=0; i < h; i++){
 theHours[i].top = y + (i*cyx) * Math.sin(hr) + pix;
 theHours[i].left = x + (i*cyx) * Math.cos(hr) + pix;
}
setTimeout(clock,100);
}





function init(){
for (i=0; i < dial.length; i++){
 theDial[i] = document.getElementById("F"+(idx+i)).style;
 theDial[i].top = y-6 + 30 * 1.4  * Math.sin(i*e*Math.PI/180) + pix;
 theDial[i].left = x-6 + 30 * 1.4 * Math.cos(i*e*Math.PI/180) + pix;
 theDots[i] = document.getElementById("D"+(idx+i)).style;
 theDots[i].top = y + 30 * Math.sin(e*i*Math.PI/180) + pix;
 theDots[i].left= x + 30 * Math.cos(e*i*Math.PI/180) + pix;
}
for (i=0; i < h; i++){
 theHours[i] = document.getElementById("H"+(idx+i)).style;
}
for (i=0; i < m; i++){
 theMinutes[i] = document.getElementById("M"+(idx+i)).style;
}
for (i=0; i < s; i++){
 theSeconds[i] = document.getElementById("S"+(idx+i)).style;
}
clock();
}

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

1.JavaScript Clock
2.Fancy Clock
3.JavaScript Clock (2)
4.Live image clock
5.Digital Clock
6.Military Clock
7.Animation: clock
8.Simulates a stop watch and displays the elapsed time
9.Calendar with Clock