Kim_zh

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
 
  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>
View Code

 

 

posted on 2013-12-23 15:20  Kim.zh  阅读(1250)  评论(0编辑  收藏  举报