GUI Components JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. GUI Components
  4. 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.

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  or 
 as Netscape does not automatically expand 
them in standards mode!
*/



Standard analogue Clock









//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('');
for (i=0; i < dial.length; i++){
document.write('+'font-family:arial,sans-serif;font-size:10px;color:'+fCol+';text-align:center">'+dial[i]+'<\/div>');
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 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.