1. 程式人生 > >h5寫一個時鐘

h5寫一個時鐘

這個是更改網上貼子的,並非原創。

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/02.css" />
        <script language="JavaScript">
            /*var atime=setInterval(clock,100);
            function clock(){
                var time=new Date();
                atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
                document.getElementById("clock").value=atime;
            }*/
            var thisObj=function(){
                this.canvas=document.getElementById("panel");
                this.context=this.canvas.getContext("2d");
                this.hour=1;
                this.minute=29;
                this.second=1;
            }
            var i=1;
            i=window.setInterval(function(){
                thisObj.context.clearRect(-200,-100,thisObj.canvas.width,thisObj.canvas.height);

                setObjValue();
                setObjValue();
                drawHour();  
                drawHourFont();   
                drawMinute();  
                drawCenter();  
                drawClockwise();  
                drawMinuteHand();  
                drawSeconds();  
                setAuthor(); 
            },1000);
            
            function setObjValue(){
                if (thisObj.second==60) {
                    thisObj.second=1;
                    thisObj.minute=thisObj.minute+1;
                }
                if (thisObj.minute==60) {
                    thisObj.minute=1;
                    thisObj.hour=thisObj.hour+1;
                }
                thisObj.second=thisObj.second+0.5;
            }
            function init(){
                thisObj=new thisObj();
                thisObj.context.translate(200,100);
            }
            //小時
            function drawHour(){
                thisObj.context.save();
                thisObj.context.strokeStyle="#FF0000";
                thisObj.context.beginPath();
                thisObj.context.arc(200,150,0,Math.PI*2,false);
                thisObj.context.stroke();
                thisObj.context.restore();
            }
            //分鐘
            function drawMinute(){
                saveAndRestore(function(){
                    for(var i=0;i<60;i++){
                        if (i % 5 != 0) {
                        thisObj.context.beginPath();
                        thisObj.context.moveTo(145,0);
                        thisObj.context.lineTo(150,0);
                        thisObj.context.stroke();
                    }
                    thisObj.context.rotate(Math.PI/30);
                }
                });
            }
            //設定字
            function drawHourFont(){
                saveAndRestore(function(){
                    var j=4;
                    thisObj.context.lineWidth=4;
                    for(var i=0;i<12;i++){
                        thisObj.context.rotate(Math.PI/6);
                        thisObj.context.beginPath();
                        thisObj.context.moveTo(140,0);
                        thisObj.context.lineTo(150,0);
                        thisObj.context.fillText(j+"點",160,0);
                        j=(j==12?0:j);
                        j++;
                        thisObj.context.stroke();
                    }
                });
            }
            
            //圓心
            function drawCenter(){
                saveAndRestore(function(){
                    thisObj.context.beginPath();
                    thisObj.context.arc(0,0,10,0,Math.PI*2, false);
                    thisObj.context.fill();
                });
            }
            //時針
            function drawClockwise(){
                saveAndRestore(function(){
                    thisObj.context.rotate(thisObj.hour*(Math.PI/6));
                    commHand(0);
                })
                
            }
            //分針
            function drawMinuteHand(){
                saveAndRestore(function(){
                    thisObj.context.rotate(thisObj.minute*(Math.PI/30));
                    commHand(-30);
                });
            }
            
            //秒針
            function drawSeconds(){
                saveAndRestore(function(){
                    thisObj.context.rotate(thisObj.second*(Math.PI/30));
                    commHand(-60);
                });
            }
            
            function commHand(i){  
                thisObj.context.fillRect(-5, -2, 10, -60 + i);  
                thisObj.context.fill();  
                  
                thisObj.context.lineJoin = 'round';  
                thisObj.context.moveTo(-10, -61+ i);  
                thisObj.context.lineTo(0, -70+ i);  
                thisObj.context.lineTo(10, -61+ i);  
                thisObj.context.lineTo(10, -61+ i);  
                thisObj.context.lineTo(-10, -61+ i);  
                thisObj.context.fill();   
            }  
            function saveAndRestore(funCall){
                thisObj.context.save();
                thisObj.context.translate(200,100);
                funCall();
                thisObj.context.restore();
            }
            function setAuthor(){  
                saveAndRestore(function(){  
                    thisObj.context.font = '20px impact';  
                    thisObj.context.fontStyle = '#FF0000';  
                    thisObj.context.fillText('作者:義', 260, 150);  
                    thisObj.context.fillText('2018年8月31日', 260, 180);
                    thisObj.context.fillText('這個是參照網上的一個帖子抄的',100,200);
                    thisObj.context.fillText('不過網上是有點小錯誤,這個已經改好了',40,220);
                    thisObj.context.stroke();  
                });  
            }  
            window.addEventListener("load",init,true);
        </script>
        
    </head>
    <body>
        <form>
      <!--        <input type="text" id="clock" size="50"/></form>-->
        <div class="myclass">
            <canvas id="panel" width="800" height="433"></canvas>
        </div>
    </body>
</html>

 

這個是css表

.myclass{
    margin: 20px auto;
    position: relative;
    width: 900px;
}
#panel{
    border: 1px solid #CCC;
}