<style type="text/css" media="all">
  .date {
   position:absolute;
   z-index:999;
   margin:15px 0 0 15px;
  }
 </style>
 <script type="text/javascript">
   // <![CDATA[
    if (window.addEventListener){
     window.addEventListener("load", addOnLoad, true);
    } else if (window.attachEvent) {
     window.attachEvent("onload", addOnLoad);
    }
   
    var el = null;
   
    function addOnLoad(){
     el = document.createElement('div');
     el.className = 'date';
     document.body.appendChild(el);
     
     document.onmousemove = moveDate;
     window.setInterval(showDate, 1000);    
    }
    function showDate(){
     var date = new Date();
     el.innerHTML = date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
    }
   
    function moveDate(e){
     var x = null;
     var y = null;
     
     if(e){
      x = e.clientX;
      y = e.clientY;
     }else if(event){
      x = event.x;
      y = event.y;
     }
     
     el.style.left = x + 'px';
     el.style.top = y + 'px';
    }
   // ]]>
  </script>

<style type="text/css" media="all">
  body{
   font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif
  }
  .date {
   position:absolute;
   z-index:999;
   margin:20px 0 0 20px;
   background-color:#8888ff;
   width:160px;
   height:160px;
  }
  .date span{
   position:absolute;
   font-size:10px;
   font-weight:bold;
   color:#f0f0f0;
  }
 </style>
 <script type="text/javascript">
   // <![CDATA[
    if (window.addEventListener){
     window.addEventListener("load", addOnLoad, true);
    } else if (window.attachEvent) {
     window.attachEvent("onload", addOnLoad);
    }
     
    var el = null;
    var time = [];
     
    function addOnLoad(){
     el = document.createElement('div');
     el.className = 'date';
     document.body.appendChild(el);
     
     rot = document.createElement('div');
     el.appendChild(rot);  
     
     for(var i = 1; i <= 12; i++){
      var a = -(((i / 6) * Math.PI) + (Math.PI * 3));
       
      var span = document.createElement('span');
      span.innerHTML = i;
      span.style.top = 75 + (40 * Math.cos(a)) + 'px';
      span.style.left = 75 + (40 * Math.sin(a)) + 'px';
      el.appendChild(span);
     }
     
     for(var i = 0; i < 3; i++){
      time[i] = [];
      for(var j = 0; j < (i + 3); j++){
       var span = document.createElement('span');
       span.innerHTML = '.';
       el.appendChild(span);
       
       time[i].push(span);
      }
     }
     
     document.onmousemove = moveDate;
     window.setInterval(showDate, 1000);    
    }
    function showDate(){
     var date = new Date();
     var c = [];
     c.push(-((date.getHours() * .5) / 12) * (Math.PI * 2));
     c.push((date.getMinutes() / 60) * (Math.PI * 2));
     c.push(-(date.getSeconds() / 60) * (Math.PI * 2));  
 
 
     for(var i = 0; i < 3; i++){
      for(var j = 0; j < time[i].length; j++){
       time[i][j].style.top = 75 + ((j * 7) * Math.cos(c[i])) + 'px';
       time[i][j].style.left = 75 + ((j * 7) * Math.sin(c[i])) + 'px';
      }
     }
     
     var str = date.toLocaleDateString();
     rot.innerHTML = '';
     
     for(var i = 0; i < str.length; i++){
      var b = (i / str.length) * (Math.PI * 2) + ((date.getSeconds() / 60) * Math.PI);
      var l = str.slice(i, i + 1);
       
      var span = document.createElement('span');
      span.innerHTML = l;
       
      span.style.left = 75 + 60 * Math.cos(b) + 'px';
      span.style.top = 75 + 60 * Math.sin(b) + 'px';
       
      rot.appendChild(span);      
     }
    }
     
    function moveDate(e){
     var x = null;
     var y = null;
     
     if(e){
      x = e.clientX;
      y = e.clientY;
     }else if(event){
      x = event.x;
      y = event.y;
     }
     
     el.style.left = x + 'px';
     el.style.top = y + 'px';
    }
   // ]]>  
  </script>