HTMl5与CSS3两种制作时钟的方法

1. 今天用canvas做了一个时钟，想起之前用JS也做过一个，所以把两个的代码个贴上来。

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           body{background:#000;}
           #c1,span{background:#fff;}
       </style>
       <script>
           window.onload=function(){
               var oC=document.getElementById('c1');
               var oGC=oC.getContext('2d');

               function toDraw(){

                   var x=200;
                   var y=200;
                   var r=150;
                   var oDate = new Date();
                   var oHours = oDate.getHours();
                   var oMin = oDate.getMinutes();
                   var oSen = oDate.getSeconds();

                   var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
                   var oMinValue = (-90 + oMin*6) * Math.PI/180;
                   var oSenValue = (-90 + oSen*6) * Math.PI/180;

                   //画一个大圆分成60分
                   oGC.beginPath();
                   for(var i=0;i<60;i++){
                       oGC.moveTo(x,y);
                       oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
                   }
                   oGC.closePath();
                   oGC.stroke();

                   //切割多余的部分
                   oGC.fillStyle='white';
                   oGC.beginPath();
                   oGC.moveTo(x,y);
                   oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
                   oGC.fill();

                   //画出整点的刻度
                   oGC.lineWidth=3
                   oGC.beginPath();
                   for(var i=0;i<12;i++){
                   oGC.moveTo(x,y);
                   oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
                   }
                   oGC.closePath();
                   oGC.stroke();

                   //切割多余部分
                   oGC.fillStyle='white';
                   oGC.beginPath();
                   oGC.moveTo(x,y);
                   oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
                   oGC.fill();

                   //指针交界的圆
                   oGC.fillStyle='#000';
                   oGC.beginPath();
                   oGC.moveTo(x,y);
                   oGC.arc(x,y,r*1/20,0,360*Math.PI/180,false);
                   oGC.closePath();
                   oGC.fill();

                   //画时针
                   oGC.lineWidth = 5;
                   oGC.beginPath();
                   oGC.moveTo(x,y);
                   oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
                   oGC.closePath();
                   oGC.stroke();

                   //画分针
                   oGC.lineWidth = 3;
                   oGC.beginPath();
                   oGC.moveTo(x,y);
                   oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);
                   oGC.closePath();
                   oGC.stroke();

                   //画秒针
                   oGC.lineWidth = 1;
                   oGC.beginPath();
                   oGC.moveTo(x,y);
                   oGC.arc(x,y,r*18/20,oSenValue,oSenValue,false);
                   oGC.closePath();
                   oGC.stroke();
               }
               setInterval(toDraw,1000);

               toDraw();
           }
       </script>
   </head>
   <body>
       <canvas id='c1' width='400' height='400'>
           <span>该浏览器不支持canvas</span>
       </canvas>
   </body>
</html>

3）以下则为CSS3所做的钟表代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script></script>
<style id="css">
   #wrap{width:200px;height:200px;border:2px solid #000; margin:100px auto; border-radius:50%; position:relative;}
   #wrap ul{margin:0;padding:0;height:200px; position:relative; list-style:none;}
   #wrap ul li{ width:2px;height:6px;background:#000; position:absolute;left:99px;top:0; -moz-transform-origin:center 100px;}
   /*#wrap ul li:nth-of-type(1){ -webkit-transform:rotate(0);}
   #wrap ul li:nth-of-type(2){ -webkit-transform:rotate(6deg);}
   #wrap ul li:nth-of-type(3){ -webkit-transform:rotate(12deg);}
   #wrap ul li:nth-of-type(4){ -webkit-transform:rotate(18deg);}
   #wrap ul li:nth-of-type(5){ -webkit-transform:rotate(24deg);}
   #wrap ul li:nth-of-type(6){ -webkit-transform:rotate(30deg);}
   #wrap ul li:nth-of-type(7){ -webkit-transform:rotate(36deg);}
   #wrap ul li:nth-of-type(8){ -webkit-transform:rotate(42deg);}*/
   #wrap ul li:nth-of-type(5n+1){ height:12px;}
   #hour{width:6px;height:45px;background:#000; position:absolute;left:97px;top:55px;-moz-transform-origin:bottom;}
   #min{width:4px;height:65px;background:#999; position:absolute;left:98px;top:35px;-moz-transform-origin:bottom;}
   #sec{width:2px;height:80px;background:red; position:absolute;left:99px;top:20px;-moz-transform-origin:bottom;}
   .ico{width:20px;height:20px;background:#000; border-radius:50%; position:absolute;left:90px;top:90px;}
</style>
</head>
<body>
<div id="wrap">
   <ul id="list">
       
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div class="ico"></div>
</div>
<script>
var oList=document.getElementById("list");
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var aLi="";
var aCss="";
for(var i=0;i<60;i++)
{
   aCss+="#wrap ul li:nth-of-type("+(i+1)+"){ -moz-transform:rotate("+i*6+"deg);}";
   aLi+="<li></li>"
}
oList.innerHTML=aLi;
oCss.innerHTML+=aCss;
toTime();
setInterval(toTime,1000);
   function toTime()
   {
       var oDate=new Date();
       var iSec=oDate.getSeconds();
       var iMin=oDate.getMinutes()+iSec/60;
       var iHour=oDate.getHours()+iMin/60;
       oSec.style.transform="rotate("+iSec*6+"deg)";
       oMin.style.transform="rotate("+iMin*6+"deg)";
       oHour.style.transform="rotate("+iHour*30+"deg)";
   };
</script>
</body>
</html>

总结：用canvas的感觉就是钟表是画上去的，比如说圆，线条等等。而用CSS3，则有拼凑的感觉，比如原型表盘用了border-radius：50%才做出了一个圆等。但是不论用哪种方式实现，理解了原理，将之拆解。

秒客网

HTMl5与CSS3两种制作时钟的方法

相关文章