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">
        <!--<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>-->
    </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%才做出了一個圓等。但是不論用哪種方式實現,理解了原理,將之拆解。

 

 

 

 

 

      

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章