Animation


            //Silly Clock - http://www.btinternet.com/~kurt.grigg/javascript
/*
1: Paste this style sheet to the head of your page HTML. 
   Do not alter it! Everything is set for alignment!



2: The on off button:
   Paste where you want it to appear in the page.



3: The clock:
   Paste this js link in to the body, idealy as the last thing just before .

To alter colours, right click on the sillyclock.js file and choose edit. The colours are
near the top.
Make sure the sillyclock.js file is uploaded to the same directory as the web page using it!
*/



Silly Clock



//Silly Clock - http://www.btinternet.com/~kurt.grigg/javascript
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
(function(){
//Configure here...
//Clock colours
var dCol = '#ff0000'; //date colour.
var fCol = '#ff0000'; //face colour.
var sCol = '#0000ff'; //seconds colour.
var mCol = '#ff0000'; //minutes colour.
var hCol = '#ff0000'; //hours colour.
//Controls
var del = 0.6;        //follow mouse speed.
var rep = 50;         //run speed (setTimeout).
//End.
var theDays = new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
var theMonths = new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var timer = null;
var vis = true;
var ofy = -7;
var ofx = -3;
var ofst = 70;
var date = new Date();
var day = date.getDate();
var year = date.getYear();
 if (year < 2000) year = year+1900; 
var dt = " " + theDays[date.getDay()] + " " + day + " " + theMonths[date.getMonth()] + " " + year;
var todaysDate = dt.split("");
var tdlen = todaysDate.length;
var clockFace = "3 4 5 6 7 8 9 10 11 12 1 2";
var cfa = clockFace.split(" ");
var cflen = cfa.length;
var _h = "...";
var hourfin = _h.split("");
var hlen = hourfin.length;
var _m = "....";
var minfin = _m.split("");
var mlen = minfin.length;
var _s = ".....";
var secfin = _s.split("");
var slen = secfin.length;
var dims = 40;
var Q1 = 360/cflen;
var Q2 = 360/todaysDate.length;
var handlen = dims/5.5;
var dy=new Array();
var dx=new Array();
var zy=new Array();
var zx=new Array();
var theSeconds = new Array();
var theMinutes = new Array(); 
var theHours = new Array();
var theDial = new Array(); 
var theDate = new Array();
var sum = tdlen + cflen + hlen + mlen + slen + 1;
for (i = 0; i < sum; i++){
dy[i] = 0;
dx[i] = 0;
zy[i] = 0;
zx[i] = 0;
}
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
var isButton = (document.getElementById("clockcontrol"));
if (isButton)
var controlButton = document.getElementById("clockcontrol");
if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}
for (i=0; i < tdlen; i++){
 document.write(''+todaysDate[i]+'<\/div>');
}
for (i=0; i < cflen; i++){
 document.write(''+cfa[i]+'<\/div>');
}
for (i=0; i < hlen; i++){
 document.write(''+hourfin[i]+'<\/div>');
}
for (i=0; i < mlen; i++){
 document.write(''+minfin[i]+'<\/div>');
}
for (i=0; i < slen; i++){
 document.write(''+secfin[i]+'<\/div>');
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView && 
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
 }
 else{
  rh = r.innerHeight;
  rw = r.innerWidth;
 }
h = rh; 
w = rw;
}
else{
h = r.clientHeight; 
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}
function OnOff(){
if (vis){ 
 vis = false;
 controlButton.value = "Clock On";
 }
else{ 
 vis = true;
 controlButton.value = "Clock Off";
 Delay();
 }
kill();
}
function kill(){
if (vis) 
 mouseControl(true);
else 
 mouseControl(false);
} 
function mouseControl(needed){
if (window.addEventListener){
 if (needed){
  document.addEventListener("mousemove",mouse,false);
 }
 else{ 
  document.removeEventListener("mousemove",mouse,false);
 }
}  
if (window.attachEvent){
 if (needed){
  document.attachEvent("onmousemove",mouse);
 }
 else{ 
  document.detachEvent("onmousemove",mouse);
 }
}
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;    
 if (typeof e.pageY == "number"){
  my = e.pageY + ofst - msy;
  mx = e.pageX + ofst;
 }
 else{
  my = e.clientY + ofst - msy;
  mx = e.clientX + ofst;
 }
if (!vis) kill();
}
function theClock(){
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 < slen; i++){
 theSeconds[i].top = dy[tdlen + cflen + hlen + mlen + i] + ofy + (i * handlen) * Math.sin(sec) + scrl(0) + pix;
 theSeconds[i].left = dx[tdlen + cflen + hlen + mlen + i] + ofx + (i * handlen) * Math.cos(sec) + pix;
 }
for (i=0; i < mlen; i++){
 theMinutes[i].top = dy[tdlen + cflen + hlen + i] + ofy + (i * handlen) * Math.sin(min) + scrl(0) + pix;
 theMinutes[i].left = dx[tdlen + cflen + hlen + i] + ofx + (i * handlen) * Math.cos(min) + pix;
 }
for (i=0; i < hlen; i++){
 theHours[i].top = dy[tdlen + cflen + i] + ofy + (i * handlen) * Math.sin(hr) + scrl(0) + pix;
 theHours[i].left = dx[tdlen + cflen + i] + ofx + (i * handlen) * Math.cos(hr) + pix;
 }
for (i=0; i < cflen; i++){
 theDial[i].top = dy[tdlen + i] + dims * Math.sin(i * Q1 * Math.PI/180) + scrl(0) + pix;
 theDial[i].left = dx[tdlen + i] + dims * Math.cos(i * Q1 * Math.PI/180) + pix;
 }
for (i=0; i < tdlen; i++){
 theDate[i].top = dy[i] + dims * 1.5 * Math.sin(-sec + i * Q2 * Math.PI/180) + scrl(0) + pix;
 theDate[i].left = dx[i] + dims * 1.5 * Math.cos(-sec + i * Q2 * Math.PI/180) + pix;
 }
if (!vis) clearTimeout(timer);
}
function Delay(){
if (!vis){
 dy[0]=-100;
 dx[0]=-100;
}
else{
 zy[0]=Math.round(dy[0]+=((my)-dy[0])*del);
 zx[0]=Math.round(dx[0]+=((mx)-dx[0])*del);
}
for (i=1; i < sum; i++){
 if (!vis){
  dy[i]=-100;
  dx[i]=-100;
 }
 else{
  zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
  zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
 }
if (dy[i-1] >= h-80) dy[i-1]=h-80;
if (dx[i-1] >= w-80) dx[i-1]=w-80;
}
timer = setTimeout(Delay,rep);
theClock();
}
function init(){
for (i=0; i < tdlen; i++){
 theDate[i] = document.getElementById("_date"+(idx+i)).style;
}
for (i=0; i < cflen; i++){
 theDial[i] = document.getElementById("_face"+(idx+i)).style; 
}
for (i=0; i < hlen; i++){
 theHours[i] = document.getElementById("_hours"+(idx+i)).style;
}
for (i=0; i < mlen; i++){
 theMinutes[i] = document.getElementById("_minutes"+(idx+i)).style; 
}
for (i=0; i < slen; i++){
 theSeconds[i] = document.getElementById("_seconds"+(idx+i)).style;         
}
winsize();
mouseControl(true);
Delay();
}
if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
 if (isButton){
  controlButton.addEventListener("click",OnOff,false);
 }
}  
else if (window.attachEvent){
 window.attachEvent("onload",init);
 window.attachEvent("onresize",winsize);
 if (isButton){
 controlButton.attachEvent("onclick",OnOff);
 }
} 
})();
}//End.

GUI Components JavaScript DHTML