javascript实现的时钟

之前就看到园子里很多牛人写js应用都非常炫，看的我是心痒痒，但技术有限，只能做些及丑陋又不实用的东西来玩玩，班门弄斧呢

 

 

View Code

< html >
< head >
< title > js时钟 </ title >
< script  type ="text/javascript" >
function  clock(obj){
     var  $  =   function (id){
         return  document.getElementById(id);
    }
    
     var  box  =  $(obj), bh,bw,hour = new  Array(),minute = new  Array(),second = new  Array(),raduis,re;
    box.style.position  =   ' relative ' ;
    bh  =  box.clientHeight;
    bw  =  box.clientWidth;
     function  createInterface(){
         var  point1  =  document.createElement( ' span ' );
        point1.style.height  =   ' 3px ' ;
        point1.style.width = ' 3px ' ;
        point1.style.backgroundColor = ' #000 ' ;
        point1.style.lineHeight  =   ' 1px ' ;
        point1.style.fontSize  =   ' 1px '
        point1.style.position  =   ' absolute ' ;
         var  point2  =  document.createElement( ' span ' );
        point2.style.height  =   ' 5px ' ;
        point2.style.width = ' 5px ' ;
        point2.style.lineHeight  =   ' 1px ' ;
        point2.style.fontSize  =   ' 1px '
        point2.style.backgroundColor = ' #000 ' ;
        point2.style.position  =   ' absolute ' ;
         var  centerY  =  bh / 2;
         var  centerX  =  bw / 2;
        raduis  =  (centerY  >=  centerX  ?  centerY : centerX)  -   10 ;
         for ( var  angle = 0 ; angle  <   360  ; angle += 30 ){
             var  qy  =  Math.round(Math.sin(angle  *  Math.PI  /   180 )  *  raduis);
             var  qx  =  Math.round(Math.cos(angle  *  Math.PI  /   180 )  *  raduis);
             var  el  =  point1.cloneNode( true );
            el.style.top  =  centerY  +  qy  +   ' px ' ;
            el.style.left  =  centerX  +  qx  +   ' px ' ;
            box.appendChild(el);
        }
         for ( var  angle = 0 ; angle  <   360  ; angle += 90 ){
             var  qy  =  Math.round(Math.sin(angle  *  Math.PI  /   180 )  *  raduis);
             var  qx  =  Math.round(Math.cos(angle  *  Math.PI  /   180 )  *  raduis);
             var  el  =  point2.cloneNode( true );
            el.style.top  =  centerY  +  qy  +   ' px ' ;
            el.style.left  =  centerX  +  qx  +   ' px ' ;
            box.appendChild(el);
        }
         var  hourone  =  document.createElement( ' span ' );
        hourone.style.width  =   ' 8px ' ;
        hourone.style.height  =   ' 8px ' ;
        hourone.style.backgroundColor  =   ' #000 ' ;
        hourone.style.position  =   ' absolute ' ;
        hourone.style.lineHeight  =   ' 1px ' ;
        hourone.style.fontSize  =   ' 1px '
         for ( var  i = 0 ; i  <   30 ; i ++ ){
             var  hone  =  hourone.cloneNode( true );
            box.appendChild(hone);
            hour.push(hone);
        }
        minuteone  =  document.createElement( ' span ' );
        minuteone.style.width  =   ' 6px ' ;
        minuteone.style.height  =   ' 6px ' ;
        minuteone.style.backgroundColor  =   ' #888 ' ;
        minuteone.style.position  =   ' absolute ' ;
        minuteone.style.lineHeight  =   ' 1px ' ;
        minuteone.style.fontSize  =   ' 1px '
         for ( var  i = 0 ; i  <   30 ; i ++ ){
             var  mone  =  minuteone.cloneNode( true );
            box.appendChild(mone);
            minute.push(mone);
        }
        
        secondone  =  document.createElement( ' span ' );
        secondone.style.width  =   ' 4px ' ;
        secondone.style.height  =   ' 4px ' ;
        secondone.style.backgroundColor  =   ' #f00 ' ;
        secondone.style.position  =   ' absolute ' ;
        secondone.style.lineHeight  =   ' 1px ' ;
        secondone.style.fontSize  =   ' 1px '
         for ( var  i = 0 ; i  <   40 ; i ++ ){
             var  sone  =  secondone.cloneNode( true );
            box.appendChild(sone);
            second.push(sone);
        }
    }
     function  calhour(h,m){
         return  ((h  *   60   +  m)  /  ( 12   *   60 ))  *   360   -   90 ;
    }
    
     function  calaa(m){
         return  (m  /   60 )  *   360   -   90 ;
    }
    
     function  setTime(h,m,s){
         var  hourA  =  calhour(h,m);
         var  minuteA  =  calaa(m);
         var  secondA  =  calaa(s);
         for ( var  i = 0 ,len = hour.length; i  <  len ; i ++ ){
             var  araduis  =  (i / len) * (raduis * 0.5);
             var  hy  =  Math.round(Math.sin(hourA  *  Math.PI  /   180 )  *  araduis);
             var  hx  =  Math.round(Math.cos(hourA  *  Math.PI  /   180 )  *  araduis);
            hour[i].style.top  =  (bh / 2) + hy + "px";
            hour[i].style.left  =  (bw / 2) + hx + "px";
        }
        
         for ( var  i = 0 ,len = minute.length; i  <  len ; i ++ ){
             var  araduis  =  (i / len) * (raduis * 0.6);
             var  hy  =  Math.round(Math.sin(minuteA  *  Math.PI  /   180 )  *  araduis);
             var  hx  =  Math.round(Math.cos(minuteA  *  Math.PI  /   180 )  *  araduis);
            minute[i].style.top  =  (bh / 2) + hy + "px";
            minute[i].style.left  =  (bw / 2) + hx + "px";
        }
        
         for ( var  i = 0 ,len = second.length; i  <  len ; i ++ ){
             var  araduis  =  (i / len) * (raduis * 0.8);
             var  hy  =  Math.round(Math.sin(secondA  *  Math.PI  /   180 )  *  araduis);
             var  hx  =  Math.round(Math.cos(secondA  *  Math.PI  /   180 )  *  araduis);
            second[i].style.top  =  (bh / 2) + hy + "px";
            second[i].style.left  =  (bw / 2) + hx + "px";
        }
    }
     function  update(){
         var  d  =   new  Date();
         var  h  =  Math.abs(d.getHours()  -   12 );
         var  m  =  d.getUTCMinutes();
         var  s  =  d.getSeconds();
        setTime(h,m,s);
    }
     function  run(){
        re  =  setInterval(update, 1000 );
    }
     function  stop(){
        clearInterval(re);
    }
    createInterface();
    update();
     return  { ' run ' :run, ' stop ' :stop};
}
window.onload  =   function (){
    clock( ' clock ' ).run();
}
</ script >
< style  type ="text/css" >
#clock {  height : 300px ;  width : 300px ;  border : 1px solid #ccc ; }
</ style >
</ head >
< body >
< div  id ="clock" >
</ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/xingzhi/archive/2011/04/16/2017645.html