JavaScripts -> Uhr -> Analog-Uhr

<script type="text/javascript">
<!--
// = = ============================================================ = =
// = = Analog Clock (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ============================================================ = =

// --------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// --------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// --------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// --------------------------------------------------------------------


// Benutzung:
// ==========

// Fügen Sie ein Script mit dem Inhalt
// makeclock();
// irgendwo im Body-Tag ein (am Ende, wenn sie Elemente mit position:absolute verwenden

// Usage:
// ======

// Include a script with the content
// makeclock();
// anywhere in the body tag (at the end if you use elements with position:absolute)


// Veränderbare Einstellungen / Adjustable Settings
// ================================================

// Die Texte aus denen die Zeiger gebildet werden
// The texts to form the hands

var sec_text="O++ ++*++ ++*++ ++*++ ++*++ ++*++ ++"; // Sekunden / Seconds
var min_text="++++++"; // Minuten / Minutes
var hou_text="++++" // Stunden / hours

/* Eine mögliche Alternative / Another possibility
var sec_text="0 WWW+++===---..........................---===+++WWW ";
var min_text="WWW+++===---";
var hou_text="WW++==--";
*/

// Die Radien / Längen der Zeiger
// the radii / lengths of the hands

var sec_rad=80; // Sekundenkreis / second circle
var min_rad=60; // Minutenzeiger / minute hand
var hou_rad=40; // Stundenzeiger / hour hand

// Die Farben der Zeiger
// the hands' colors

var sec_col="#ff0000"; // Sekundenkreis / second circle
var min_col="#0000ff"; // Minutenzeiger / minute hand
var hou_col="#0000ff"; // Stundenzeiger / hour hand

var font_size="10px"; // Schriftgröße / font size


// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var sec_arr=sec_text.split("");
var min_arr=min_text.split("");
var hou_arr=hou_text.split("");

var sec_x=new Array();
var sec_y=new Array();
var min_x=new Array();
var min_y=new Array();
var hou_x=new Array();
var hou_y=new Array();

var mousex=100;
var mousey=100;


function makeclock() {
  var i;
  document.writeln('<style type="text/css">');
  document.writeln('div.cl_sec { position:absolute; left:0px; top:0px; font-family:Verdana,sans-serif; font-size:'+font_size+'; color:'+sec_col+'; }');
  document.writeln('div.cl_min { position:absolute; left:0px; top:0px; font-family:Verdana,sans-serif; font-size:'+font_size+'; color:'+min_col+'; }');
  document.writeln('div.cl_hou { position:absolute; left:0px; top:0px; font-family:Verdana,sans-serif; font-size:'+font_size+'; color:'+hou_col+'; }');
  document.writeln('<\/style>');
  for(i=0;i<sec_arr.length;i++)document.writeln('<div class="cl_sec" id="sec_'+i+'">'+sec_arr[i]+'<\/div>');
  for(i=0;i<min_arr.length;i++)document.writeln('<div class="cl_min" id="min_'+i+'">'+min_arr[i]+'<\/div>');
  for(i=0;i<hou_arr.length;i++)document.writeln('<div class="cl_hou" id="hou_'+i+'">'+hou_arr[i]+'<\/div>');
  updateclock();
  window.setInterval("updateclock()",1000);
  document.onmousemove=capturemaus;
}

function updateclock() {
  var h,m,s,ha,ma,sa,i;
  var d=new Date();
  h=d.getHours();
  m=d.getMinutes();
  s=d.getSeconds();
  ha=(810-30*h)%360;
  ma=(450-6*m)%360;
  sa=810-6*s;
  ha=ha*Math.PI/180;
  ma=ma*Math.PI/180;
  for(i=0;i<min_arr.length;i++) {
    min_x[i]=min_rad*Math.cos(ma)*(i+1)/min_arr.length;
    min_y[i]=0-(min_rad*Math.sin(ma)*(i+1)/min_arr.length);
  }
  for(i=0;i<hou_arr.length;i++) {
    hou_x[i]=hou_rad*Math.cos(ha)*(i+1)/hou_arr.length;
    hou_y[i]=0-(hou_rad*Math.sin(ha)*(i+1)/hou_arr.length);
  }
  for(i=0;i<sec_arr.length;i++) {
    sec_x[i]=sec_rad*Math.cos(((sa-(i*360/sec_arr.length))%360)*Math.PI/180);
    sec_y[i]=0-(sec_rad*Math.sin(((sa-(i*360/sec_arr.length))%360)*Math.PI/180));
  }
  updateposition();
}

function updateposition() {
  for(i=0;i<min_arr.length;i++) {
    document.getElementById("min_"+i).style.left=(mousex+min_x[i])+"px";
    document.getElementById("min_"+i).style.top=(mousey+min_y[i])+"px";
  }
  for(i=0;i<hou_arr.length;i++) {
    document.getElementById("hou_"+i).style.left=(mousex+hou_x[i])+"px";
    document.getElementById("hou_"+i).style.top=(mousey+hou_y[i])+"px";
  }
  for(i=0;i<sec_arr.length;i++) {
    document.getElementById("sec_"+i).style.left=(mousex+sec_x[i])+"px";
    document.getElementById("sec_"+i).style.top=(mousey+sec_y[i])+"px";
  }
}

function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.clientX;
    mousey=window.event.clientY;
  }
  else {
    mousex=nsevent.pageX;
    mousey=nsevent.pageY;
  }
  updateposition();
}

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Analog Clock --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 03.Mar.2004 --
// ----------------------------

//-->
</script>