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>