1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6
7 <script type="text/javascript">
8 window.onload = function (){
9 var oC = document.getElementById("c1");
10
11 var oGC = oC.getContext("2d");
12 var x = 300;
13 var y = 300;
14 var r = 150;
15
16 var h = 0;
17 var m = 0;
18 var s = 0;
19
20
21 setInterval(function (){
22 var date = new Date();
23 h = date.getHours();
24 m = date.getMinutes();
25 s = date.getSeconds();
26 var f = m/2;
27 console.log(h + "-" + m + "-" + s + " , " + f);
28 html5Clock();
29 },1000);
30
31 function html5Clock(){
32 oGC.beginPath();
33 for(var i = 0; i<60;i++){
34 oGC.moveTo(x,y);
35 oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180);
36
37 }
38 oGC.closePath();
39 oGC.stroke();
40
41 oGC.beginPath();
42 oGC.fillStyle = "#fff";
43 oGC.arc(x,y,r-8,0,2*Math.PI);
44 oGC.closePath();
45 oGC.fill();
46
47
48 oGC.beginPath();
49 //oGC.fillStyle = "red";
50 for(var i=0;i<12;i++){
51 oGC.moveTo(x,y);
52 oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180);
53 //oGC.lineWidth = "2";
54 }
55 oGC.closePath();
56 oGC.stroke();
57
58 oGC.beginPath();
59 oGC.arc(x,y,r-20,0,2*Math.PI);
60 oGC.closePath();
61 oGC.fill();
62
63 //秒钟
64 oGC.beginPath();
65 //oGC.strokeStyle = "#016a9f";
66 oGC.moveTo(x,y);
67 oGC.arc(x,y,r-9,6*(s-15)*Math.PI/180,6*(s-15)*Math.PI/180);
68 oGC.lineWidth = "1";
69 oGC.stroke();
70
71 //分钟
72 oGC.beginPath();
73 oGC.moveTo(x,y);
74 oGC.arc(x,y,r-12,6*(m-15)*Math.PI/180,6*(m-15)*Math.PI/180);
75 //oGC.lineWidth = 2;
76 oGC.stroke();
77
78 //时钟
79 oGC.beginPath();
80 //oGC.strokeStyle = "red";
81 oGC.moveTo(x,y);
82 oGC.arc(x,y,r-50,(30*(h-3)+(m/2))*Math.PI/180,(30*(h-3)+(m/2))*Math.PI/180);
83 oGC.stroke();
84 }
85
86 html5Clock();
87
88 }
89 </script>
90
91 </head>
92
93 <body>
94
95 <canvas id="c1" width="800" height="600" style="border:1px solid #ccc;"></canvas>
96
97 </body>
98 </html>