1 <!doctype html>
2 <html>
3 <head>
4 <title>canvas dClock</title>
5 </head>
6 <body>
7 <canvas id = "clock" width = "500px" height = "200px">
8 您的浏览器太古董了，升级吧！
9 </canvas>
10 <script type = "text/javascript">
11 var clock = document.getElementById("clock");
12 var cxt = clock.getContext("2d");
13
14 //显示数字时钟
15 function showTime(m, n) {
16 cxt.clearRect(0, 0, 500, 500);
17
18 var now = new Date;
19 var hour = now.getHours();
20 var min = now.getMinutes();
21 var sec = now.getSeconds();
22 var msec = now.getMilliseconds();
23 hour = hour >= 10 ? hour : "0" + hour;
24 min = min >= 10 ? min : "0" + min;
25 sec = sec >= 10 ? sec : "0" + sec;
26 msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ? ("00" + msec) : msec;
27
28 bdigital(m, n, hour);
29 bdigital(m + 160, n, min);
30 bdigital(m + 320, n, sec);
31 //tdigital(m + 480, n, msec);
32
33 //三位数的显示
34 function tdigital(x, y, num) {
35 var ge = num % 10;
36 var shi = (parseInt(num / 10)) % 10;
37 var bai = parseInt((parseInt(num / 10)) / 10) % 10;
38 digital(x, y, bai);
39 digital(x + 70, y, shi);
40 digital(x + 140, y, ge);
41 }
42
43 //两位数的显示
44 function bdigital(x, y, num) {
45 var ge = num % 10;
46 var shi = (parseInt(num / 10)) % 10;
47 digital(x, y, shi);
48 digital(x + 70, y, ge);
49 }
50
51 //画：
52 //小时与分钟之间
53 cxt.lineWidth = 5;
54 cxt.strokeStyle = "#000";
55 cxt.fillStyle = "#000";
56 cxt.beginPath();
57 cxt.arc(m + 140, n + 80, 3, 0, 360, false);
58 cxt.fill();
59 cxt.closePath();
60 cxt.stroke();
61
62 cxt.lineWidth = 5;
63 cxt.strokeStyle = "#000";
64 cxt.fillStyle = "#000";
65 cxt.beginPath();
66 cxt.arc(m + 140, n + 100, 3, 0, 360, false);
67 cxt.fill();
68 cxt.closePath();
69 cxt.stroke();
70
71 //分钟与秒之间
72 cxt.lineWidth = 5;
73 cxt.strokeStyle = "#000";
74 cxt.fillStyle = "#000";
75 cxt.beginPath();
76 cxt.arc(m + 300, n + 80, 3, 0, 360, false);
77 cxt.fill();
78 cxt.closePath();
79 cxt.stroke();
80
81 cxt.lineWidth = 5;
82 cxt.strokeStyle = "#000";
83 cxt.fillStyle = "#000";
84 cxt.beginPath();
85 cxt.arc(m + 300, n + 100, 3, 0, 360, false);
86 cxt.fill();
87 cxt.closePath();
88 cxt.stroke();
89
90 //秒与毫秒之间一个.
91 // cxt.lineWidth = 5;
92 // cxt.strokeStyle = "#000";
93 // cxt.fillStyle = "#000";
94 // cxt.beginPath();
95 // cxt.arc(m + 460, n + 100, 3, 0, 360, false);
96 // cxt.fill();
97 // cxt.closePath();
98 // cxt.stroke();
99 }
100
101 //显示一位数字
102 function digital(x, y, num) {
103 //设置风格
104 cxt.lineWidth = 5;
105 cxt.strokeStyle = "#000";
106
107 //a
108 function a() {
109 cxt.beginPath();
110 cxt.moveTo(x, y);
111 cxt.lineTo(x + 50, y);
112 cxt.closePath();
113 cxt.stroke();
114 }
115
116 //b
117 function b() {
118 cxt.beginPath();
119 cxt.moveTo(x + 55, y + 5);
120 cxt.lineTo(x + 55, y + 55);
121 cxt.closePath();
122 cxt.stroke();
123 }
124
125 //c
126 function c() {
127 cxt.beginPath();
128 cxt.moveTo(x + 55, y + 60);
129 cxt.lineTo(x + 55, y + 110);
130 cxt.closePath();
131 cxt.stroke();
132 }
133
134 //d
135 function d() {
136 cxt.beginPath();
137 cxt.moveTo(x + 50, y + 115);
138 cxt.lineTo(x, y + 115);
139 cxt.closePath();
140 cxt.stroke();
141 }
142
143 //e
144 function e() {
145 cxt.beginPath();
146 cxt.moveTo(x - 5, y + 110);
147 cxt.lineTo(x - 5, y + 60);
148 cxt.closePath();
149 cxt.stroke();
150 }
151
152 //f
153 function f() {
154 cxt.beginPath();
155 cxt.moveTo(x - 5, y + 55);
156 cxt.lineTo(x - 5, y + 5);
157 cxt.closePath();
158 cxt.stroke();
159 }
160
161 //g
162 function g() {
163 cxt.beginPath();
164 cxt.moveTo(x, y + 57.5);
165 cxt.lineTo(x + 50, y + 57.5);
166 cxt.closePath();
167 cxt.stroke();
168 }
169
170 //0
171 function zero() {
172 a(); b(); c(); d(); e(); f();
173 }
174 //1
175 function one() {
176 b(); c();
177 }
178 //2
179 function two() {
180 a(); b(); d(); e(); g();
181 }
182 //3
183 function three() {
184 a(); b(); c(); d(); g();
185 }
186 //4
187 function four() {
188 b(); c(); f(); g();
189 }
190 //5
191 function five() {
192 a(); c(); d(); f(); g();
193 }
194 //6
195 function six() {
196 a(); c(); d(); e(); f(); g();
197 }
198 //7
199 function seven() {
200 a(); b(); c();
201 }
202 //8
203 function eight() {
204 a(); b(); c(); d(); e(); f(); g();
205 }
206 //9
207 function nine() {
208 a(); b(); c(); d(); f(); g();
209 }
210
211 //数字n
212 function number(n) {
213 switch (n) {
214 case 0: zero(); break;
215 case 1: one(); break;
216 case 2: two(); break;
217 case 3: three(); break;
218 case 4: four(); break;
219 case 5: five(); break;
220 case 6: six(); break;
221 case 7: seven(); break;
222 case 8: eight(); break;
223 case 9: nine(); break;
224 }
225 }
226 number(num);
227 }
228
229 showTime(1, 45);
230 setInterval("showTime(1,45)", 1000);
231 </script>
232 </body>
233 </html>
浙公网安备 33010602011771号