1 <!DOCTYPE html>
  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 </head>
  7 <body>
  8     <div style="text-align: center; color: #ffffff;">
  9         <canvas id="canvas" height="160" width="160">
 10             您的浏览器不支持html5的canvas
 11         </canvas>
 12         <div style="height: 10px">
 13         </div>
 14         <div style="background-color: #0094ff;">
 15             <div id="div1">
 16             </div>
 17             <div id="div2">
 18             </div>
 19         </div>
 20     </div>
 21     <script type="text/javascript">
 22         window.onload = function () {
 23             var canvas = document.getElementById("canvas");
 24             var can = canvas.getContext("2d");
 25             var radius = 80; //半径
 26             var centre = [80, 80]; //中心点
 27 
 28             setInterval(function () {
 29                 mydrawclock();
 30 
 31             }, 1000);
 32             //   mydrawclock();
 33 
 34             function mydrawclock() {
 35                 //清空画布
 36                 can.clearRect(0, 0, 500, 500);
 37                 //钟的大小（圆）
 38                 can.fillStyle = "#ebf0eb";
 39                 can.beginPath();
 40                 can.arc(centre[0], centre[1], radius, 0, Math.PI * 2, true);
 41                 can.closePath();
 42                 can.fill();
 43                 //中心点
 44                 can.fillStyle = "#0094ff";
 45                 can.beginPath();
 46                 can.arc(centre[0], centre[1], 4, 0, Math.PI * 2, true);
 47                 can.closePath();
 48                 can.fill();
 49                 //画钟 宽度 度数 颜色 长度
 50                 function drawclock(w, d, c, l) {
 51                     can.beginPath();
 52                     can.strokeStyle = c;
 53                     can.lineWidth = w;
 54                     can.moveTo(centre[0], centre[1]);
 55                     can.lineTo(centre[0] + (radius - l) * Math.cos(d), centre[1] + (radius - l) * Math.sin(d));
 56                     can.stroke();
 57                 }
 58 
 59                 var date = new Date();
 60                 //因为画圆是从3点钟方向开始的 所以要减去
 61                 var hours = date.getHours();
 62                 var minutes = date.getMinutes();
 63                 var seconds = date.getSeconds();
 64                 var day = date.getDay();
 65 
 66                 drawclock(4, (hours - 3 + minutes / 60) * 30 * Math.PI / 180, "#0094ff", 33);
 67                 drawclock(3, (minutes - 15 + seconds / 60) * 6 * Math.PI / 180, "#0094ff", 22);
 68                 drawclock(2, (seconds - 15) * 6 * Math.PI / 180, "#0094ff", 1);
 69 
 70                 document.getElementById("div1").innerHTML = hours + ":" + minutes + ":" + seconds;
 71 
 72                 switch (day) {
 73                     case 0:
 74                         day = "星期天";
 75                         break;
 76                     case 1:
 77                         day = "星期一";
 78                         break;
 79                     case 2:
 80                         day = "星期二";
 81                         break;
 82                     case 3:
 83                         day = "星期三";
 84                         break;
 85                     case 4:
 86                         day = "星期四";
 87                         break;
 88                     case 5:
 89                         day = "星期五";
 90                         break;
 91                     case 6:
 92                         day = "星期六";
 93                         break;
 94                     default:
 95                         break;
 96                 }
 97 
 98                 document.getElementById("div2").innerHTML = day; // "</br>" + day;
 99                 // centre[0], centre[1]
100                 //画分钟刻度
101                 for (var i = 0; i < 60; i++) {
102                     var angle = i * 6 * Math.PI / 180;
103                     can.strokeStyle = "red";
104                     can.beginPath();
105                     can.lineWidth = 1;
106                     can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
107                     can.lineTo(centre[0] + (radius - 5) * Math.cos(angle), centre[1] + (radius - 5) * Math.sin(angle));
108                     can.stroke();
109                 }
110                 //画时钟刻度
111                 for (var i = 0; i < 12; i++) {
112                     var angle = i * 30 * Math.PI / 180;
113                     can.strokeStyle = "#0094ff";
114                     can.lineWidth = 2;
115                     can.beginPath();
116                     can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
117                     can.lineTo(centre[0] + (radius - 8) * Math.cos(angle), centre[1] + (radius - 8) * Math.sin(angle));
118                     can.stroke();
119                 }
120             }
121 
122 
123         }
124     </script>
125 </body>
126 </html>