现在位置首页 / 前端开发 /正文

纯js实现圆形时钟秒针同步

作者: IT小兵 | 2014年10月13日| 热度:℃ | 评论: |参与:

网上有很多jquery写的时钟插件了,今天分享一个纯js写的圆形时钟,同时带有秒针同步。样子丑点可以美化一下。

效果图:

实现代码比较简单:

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

算法示意图:

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询