javascript 实现圆形时钟秒针同步

浏览数：20 / 时间：2015年06月08日

<!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>