html5的时钟代码,Css代码库,德仔网

代码语言

代码分类

【Css】 html5的时钟

作者:Thunderstorm / 发布于2013/11/21/ 1028

<!doctype html>
<html>
 <head>
 </head>
 <body>
  <canvas id="canvas" width="900" height="900" style="background:#ff9900"></canvas>
  <script>
   var canvas=document.getElementById('canvas');
   var cxt=canvas.getContext('2d');
  function shizhong() {
   cxt.clearRect(0,0,900,900)
   var now=new Date();
   var sec=now.getSeconds();
   var min=now.getMinutes();
   var hour=now.getHours();
   hour=hour+min/60;
   hour=hour>12?hour-12:hour;
    cxt.beginPath();
    cxt.lineWidth=20;
    cxt.strokeStyle="blue";
    cxt.arc(300,400,300,0,360,false);
    cxt.stroke();
    cxt.closePath();
     for(var i=0;i<12;i++){
      cxt.save();
      cxt.lineWidth="10";
      cxt.strokeStyle="black";
      cxt.translate(300,400);
      cxt.rotate(i*30*Math.PI/180);
      cxt.beginPath();
      cxt.moveTo(0,-220);
      cxt.lineTo(0,-290);
      cxt.stroke();
      cxt.closePath();
      cxt.restore();
     }
    for(var i=0;i<60;i++){
     cxt.save();
     cxt.lineWidth=5;
     cxt.strokeStyle="black";
     cxt.translate(300,400);
     cxt.rotate(i*6*Math.PI/180);
     cxt.beginPath();
     cxt.moveTo(0,-270);
     cxt.lineTo(0,-290);
     cxt.closePath();
     cxt.stroke();
     cxt.restore();
    
    }
    cxt.save();
    cxt.translate(300,400);
    cxt.lineWidth=8;
    cxt.strokeStyle="#000";
    cxt.beginPath();
    cxt.rotate(hour*30*Math.PI/180);
    cxt.moveTo(0,-150);
    cxt.lineTo(0,10);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    cxt.save();
    cxt.lineWidth=5;
    cxt.strokeStyle="#000";
    cxt.translate(300,400);
    cxt.rotate(min*6*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-180);
    cxt.lineTo(0,10);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
    cxt.save();
    cxt.lineWidth=2;
    cxt.strokeStyle="red";
    cxt.translate(300,400);
    cxt.rotate(sec*6*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0,-240);
    cxt.lineTo(0,10);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
  }
    setInterval(shizhong,1000);
  </script>
 </body>
</html>

试试其它关键字

　时钟　

同语言下

可能有用的

Thunderstorm贡献的其它代码(1)

.html5的时钟