<canvas id="clock" width="500" height="500" style="border:1px solid #d3d3d3;">
        您的瀏覽器不支援 HTML5 canvas 標籤。</canvas>
</div>

<script type="text/javascript">
    var clock=document.getElementById("clock");
    var c=clock.getContext("2d");

    draw();
    //自定義一個畫圖的函式
    function draw(){
        //清理畫布
        c.clearRect(0,0,500,500);

        //獲取當前時間
        var now=new Date();

        //獲取當前秒鐘數
        var sec=now.getSeconds();

        //獲取當前分鐘數
        var min=now.getMinutes();

        //獲取小時數
        var hours=now.getHours();


        //當前的分鐘佔整個60分鐘的小數是多少。

        hours=hours+min/60;

        // console.log(hours);
        //把二十四小時轉成十二小時制
        hours=(hours>12?hours-12:hours);

        //畫表盤
        c.beginPath();
        c.lineWidth=10;
        c.strokeStyle="#abc";
        c.arc(250,250,200,0,2*Math.PI);
        c.closePath();
        c.stroke();




        //小時
        for(var i=0;i<12;i++){
            c.save();
            c.lineWidth=7;
            c.strokeStyle="black";
            //把中心點移動畫布中間
            c.translate(250,250);
            c.rotate(i*30*Math.PI/180);
            c.beginPath();
            c.moveTo(0,-170);
            c.lineTo(0,-190);
            c.stroke();
            c.closePath();
            c.restore();
        }

        //  分鐘
        for(var i=0;i<60;i++){
            c.save();
            c.lineWidth=5;
            c.strokeStyle="black";
            c.translate(250,250);
            c.rotate(i*6*Math.PI/180);
            c.beginPath();
            c.moveTo(0,-180);
            c.lineTo(0,-190);

            c.stroke();
            c.closePath();
            c.restore();

        }

        //時針
        c.save();
        c.lineWidth=10;
        c.strokeStyle="black";
        c.translate(250,250);
        c.rotate(hours*30*Math.PI/180);
        c.beginPath();
          c.moveTo(0,-120);
           c.lineTo(0,10);
        c.stroke();
        c.closePath();
        c.restore();

        //分針
        c.save();
        c.lineWidth=5;
        c.strokeStyle="black";
        c.translate(250,250);
        c.rotate(min*6*Math.PI/180);
        c.beginPath();
          c.moveTo(0,-160);
        c.lineTo(0,10);
        c.stroke();
        c.closePath();
        c.restore();


        //秒針
        c.save();
        c.lineWidth=3;
        c.strokeStyle="red";
        c.translate(250,250);
        c.rotate(sec*6*Math.PI/180);
        c.beginPath();
        c.moveTo(0,-160);
        c.lineTo(0,10);
        c.stroke();
        c.closePath();
        c.restore();
        //中間小圓點
        c.arc(250,250,5,0,2*Math.PI);

        c.fillStyle="red";
        c.fill();



    }

      setInterval(draw,1000);

   //   alert(draw);


</script>