这个时钟还是不好,最好用VML来做,更加逼真

解决方案 »

  1.   

    用我做的这个吧
    <html xmlns:v="urn:schemas-microsoft-com:vml" 
          xmlns:o="urn:schemas-microsoft-com:office:office" 
          xmlns="http://www.w3.org/TR/REC-html40">
    <head>
       <META http-equiv="Content-Type" content="text/html; Charset=UTF-8">
       <META HTTP-EQUIV="pragma" CONTENT="no-cache">
       <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
       <title>流程监控</title>
        <STYLE>
         v\:*{behavior:url(#default#VML);}
         o\:*         { behavior: url(#default#VML) }
        </STYLE>
        <script>
          var  cx=200;var  cy=200;var  banj=80;var  dkd=16;var  xkd=8;
      var  seclen=0.8;var  minlen=0.6;var  hourlen=0.5;
          function init(){
               div1.appendChild(document.createElement("<v:oval   style='position:absolute;;left:"+(cx-banj)+";top:"+(cy-banj)+";width:"+(2.0*banj)+";height:"+(2.0*banj)+";'  strokeweight='1' fillcolor='white'/>"));
               for(var i=0;i<12;i++){
         var ang=Math.PI/6.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-dkd/banj;
                 div1.appendChild(document.createElement("<v:line  style='position:absolute;left:0;top:0;'  from='"+(cx+px*sca)+","+(cy+py*sca)+"'  to='"+(cx+px)+","+(cy+py)+"' strokecolor='blue' strokeweight='1'/>"));
               }
               for(var i=0;i<60;i++){
                 var ang=Math.PI/30.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-xkd/banj;
                 div1.appendChild(document.createElement("<v:line  style='position:absolute;left:0;top:0;'  from='"+(cx+px*sca)+","+(cy+py*sca)+"'  to='"+(cx+px)+","+(cy+py)+"' strokecolor='blue' strokeweight='1'/>"));
               }
               div1.appendChild(document.createElement("<v:line id='hpoint' style='position:absolute;left:0;top:0;'  from='"+cx+","+cy+"'  to='"+cx+","+(cy-banj*hourlen)+"' strokecolor='blue' strokeweight='3'/>"));
               div1.all.hpoint.innerHTML="<v:stroke EndArrow='Classic' />";
               div1.appendChild(document.createElement("<v:line  id='mpoint' style='position:absolute;left:0;top:0;'  from='"+cx+","+cy+"'  to='"+cx+","+(cy-banj*minlen)+"' strokecolor='blue' strokeweight='2'/>"));
               div1.all.mpoint.innerHTML="<v:stroke EndArrow='Classic' />";
               div1.appendChild(document.createElement("<v:line  id='spoint' style='position:absolute;left:0;top:0;'  from='"+cx+","+cy+"'  to='"+cx+","+(cy-banj*seclen)+"' strokecolor='red' strokeweight='1'/>"));
               div1.all.spoint.innerHTML="<v:stroke EndArrow='Classic' />";
       showtime();
       setInterval("showtime();",1000);
          }
      function showtime(){
           var dt=new Date();
       var h=dt.getHours() % 12;
       var m=dt.getMinutes();
       var s=dt.getSeconds();
       var tot=h+m/60.0+s/3600.0;
       var ang=-Math.PI/2.0+2.0*Math.PI*tot/12.0;
       div1.all.hpoint.to=(cx+banj*hourlen*Math.cos(ang))+","+(cy+banj*hourlen*Math.sin(ang));
       tot=m+s/60.0;
       ang=-Math.PI/2.0+2.0*Math.PI*tot/60.0;
       div1.all.mpoint.to=(cx+banj*minlen*Math.cos(ang))+","+(cy+banj*minlen*Math.sin(ang));
       ang=-Math.PI/2.0+2.0*Math.PI*s/60.0;
       div1.all.spoint.to=(cx+banj*seclen*Math.cos(ang))+","+(cy+banj*seclen*Math.sin(ang));
      }    </script>
    </head><body  style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onload="init();">
       <div style='width:100%;height:100%;background-color:white;border:0 solid gray;color:black;overflow:hidden' id="div1">
       </div>
    </body>
    </html>