<!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进行画图。
时间： 2024-10-06 14:15:20