1 function addLoadEvent(func) { 2 var oldonload = window.onload; 3 if (typeof window.onload != 'function') { 4 window.onload = func; 5 } else { 6 window.onload = function() { 7 oldonload(); 8 func(); 9 } 10 }; 11 } 12 addLoadEvent(clock); 13 14 function clock() { 15 var canvas = document.querySelector('canvas'); 17 if (canvas.getContext) { 18 var context = canvas.getContext('2d'); 19 21 context.clearRect(0, 0, canvas.width, canvas.height); 22 24 context.strokeStyle = "#00FFFF"; 25 context.lineWidth = 6; 26 context.beginPath(); 27 context.arc(150, 150, 140, 0, 2 * Math.PI, false); 28 context.stroke(); 29 context.closePath(); 30 32 for (var i = 0; i < 12; i++) { 34 context.strokeStyle = "#FFFF00"; 35 context.lineWidth = 4; 36 context.save(); 38 context.translate(150, 150); 40 context.rotate(30 * i * Math.PI / 180); 42 context.beginPath(); 43 context.moveTo(0, -137); 44 context.lineTo(0, -120); 45 context.stroke(); 46 context.closePath(); 48 context.restore(); 49 }; 50 52 for (var i = 0; i < 60; i++) { 53 context.strokeStyle = "#FFFF00"; 54 context.lineWidth = 2; 55 context.save(); 56 context.translate(150, 150); 58 context.rotate(6 * i * Math.PI / 180); 59 context.beginPath(); 60 context.moveTo(0, -137); 61 context.lineTo(0, -127); 62 context.stroke(); 63 context.closePath(); 64 context.restore(); 65 }; 66 68 var now = new Date(); 69 var sec = now.getSeconds(); 70 var min = now.getMinutes(); 71 var hour = now.getHours(); 72 hour > 12 ? hour - 12 : hour; 73 hour += (min / 60); 74 min += (sec / 60); 75 77 context.save(); 78 context.lineWidth = 5; 79 context.strokeStyle = "#00FFFF"; 80 context.translate(150, 150); 81 context.rotate(hour * 30 * Math.PI / 180); //每小时旋转30度 82 context.beginPath(); 83 context.moveTo(0, -70); 84 context.lineTo(0, 10); 85 context.stroke(); 86 context.closePath(); 88 context.restore(); 89 91 context.save(); 92 context.lineWidth = 3; 93 context.strokeStyle = "#FFFF00"; 94 context.translate(150, 150); 95 context.rotate(min * 6 * Math.PI / 180); //每分钟旋转6度 96 context.beginPath(); 97 context.moveTo(0, -100); 98 context.lineTo(0, 10); 99 context.stroke(); 100 context.closePath(); 102 context.restore(); 103 105 context.save(); 106 context.lineWidth = 2; 107 context.strokeStyle = "#FF0000"; 108 context.translate(150, 150); 109 context.rotate(sec * 6 * Math.PI / 180); //每秒旋转6度 110 context.beginPath(); 111 context.moveTo(0, -120); 112 context.lineTo(0, 10); 113 context.stroke(); 114 context.closePath(); 116 context.restore(); 117 119 hour = now.getHours(); 120 min = now.getMinutes(); 121 if (hour >= 10) { 122 hour = hour; 123 } else { 124 hour = "0" + hour; 125 }; 126 if (min >= 10) { 127 min = min; 128 } else { 129 min = "0" + min; 130 }; 131 if (sec >= 10) { 132 sec = sec; 133 } else { 134 sec = "0" + sec; 135 }; 136 context.font = "18px 微软雅黑"; 137 context.lineWidth = 2; 138 context.fillStyle = "#0000FF"; 139 context.textAlign = "center"; 140 context.textBaseline = "middle"; 141 context.fillText(hour + ":" + min + ":" + sec, 150, 250); 142 }; 143 setTimeout(clock, 1000); 144 }