<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #clock { border: 1px solid silver; width: 250px; height: 250px; position: relative; margin-left: 400px; } </style> <script type="text/javascript"> //画圆时钟 function drawClock() { //没一分钟就会画出一条秒针线，去掉之前的秒针线。 document.getElementById("clock").innerHTML = ""; //刻度盘 for (var i = 0; i < 360; i++) { var point = document.createElement("div"); point.style.backgroundColor = "red"; point.style.width = "1px"; point.style.height = "1px"; point.style.position = "absolute";//point.style.float在这里无法使用。所以使用定位来实现点的不同分布。 //整点出用不同的点表示出来。如果能被30整除那么他就是1~12中的数字。 if (i % 30 == 0) { point.style.backgroundColor = "black"; point.style.width = "3px"; point.style.height = "3px"; //Math.cos(x)三角函数在这里的参数x代表的弧度制。不是角度。所以需要把角度转换成弧度（角度*π/180）。 // (120 * Math.cos(i * Math.PI / 180) + 125) point.style.left = (120 * Math.cos(i * Math.PI / 180) + 125) + "px"; point.style.top = (120 * Math.sin(i * Math.PI / 180) + 125) + "px"; } else { point.style.left = (125 * Math.cos(i * Math.PI / 180) + 125) + "px"; point.style.top = (125 * Math.sin(i * Math.PI / 180) + 125) + "px"; } document.getElementById("clock").appendChild(point); } //秒针 var today = new Date();//用来获取系统当前的时间，秒针的时间与系统时间同步 for (var j = 0; j <= 110; j++) { var point = document.createElement("div"); point.style.backgroundColor = "blue"; point.style.width = "1px"; point.style.height = "1px"; point.style.position = "absolute"; //通过保持夹角的不变。来画直线 //Math.cos(today.getSeconds() * 6 * Math.PI / 180 - Math.PI / 2) * j + 125 point.style.left = (Math.cos(today.getSeconds() * 6 * Math.PI / 180 - Math.PI / 2) * j + 125) + "px"; point.style.top = (Math.sin(today.getSeconds()*6 * Math.PI / 180 - Math.PI / 2) * j + 125) + "px"; document.getElementById("clock").appendChild(point); } setTimeout(drawClock,1000); } </script> </head> <body onload="drawClock()"> <div> <div id="clock"> </div> </div> </body> </html>
知识重点：
使用javascript进行画图。