变换之时钟实现

为了更好的利用学过的知识，扎实一下知识，也方便日后的复习，则需要做一些东西热身热身一下
以下是实现的代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 200px;
                height: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -100px;
                border: 1px solid black;
                border-radius: 50%;
            }
            #list > li{
                position: absolute;
                list-style: none;
                background: black;
                left: 99px;
                top: 0px;
                width: 2px;
                height: 8px;
                transform-origin: center 100px;
                
            }
            #list > li:nth-child(5n+1){
                height: 12px;
            }
            .licon{
                position: absolute;
                width: 20px;
                height: 20px;
                background: pink;
                border-radius: 50%;
                left: 90px;
                top: 90px;
                
            }
            .hour{
                width: 6px;
                height: 30px;
                background: black;
                position: absolute;
                left:96px ;
                top: 70px;
                transform-origin: center bottom;
            }
            .min{
                width: 4px;
                height: 50px;
                position: absolute;
                background: black;
                left: 98px;
                top: 50px;
                transform-origin: center bottom;
            }
            .sec{
                width: 2px;
                height: 70px;
                position: absolute;
                left: 99px;
                top: 30px;
                background: red;
                transform-origin: center bottom;
            }
            
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <ul id="list">
                
            </ul>
            <div class="hour"></div>
            <div class="min"></div>
            <div class="sec"></div>
            <div class="licon"></div>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            
            var $listNode = $("#list");
            var $headNode = $("head>style");
            
            var hours = $(".hour");
            var mins = $(".min");
            var secs = $(".sec");
            var licons = $(".licon");
            
            
            for (var i =0 ; i < 60; i++){
                
                $listNode.append("<li></li>")
                $headNode.append("#list > li:nth-of-type("+(i+1)+"){transform: rotate("+(i*6)+"deg);}")
            }
            //这样子提前运行是因为不用打开一秒后再闪退，所以还是这样子比较好，不会影响视觉。
            move()
            setInterval(move,1000)
            
            function move(){
                console.log('aaa')
                var date = new Date()
                var sec = date.getSeconds()
                var min = date.getMinutes()+sec/60
                var hour = date.getHours()+min/60
                
                secs.css("transform","rotate("+(30*sec)+"deg)")
                mins.css("transform","rotate("+(6*min)+"deg)")
                hours.css("transform","rotate("+(30*hour)+"deg)")
                
            }
            
            
            
            
        })
        
    </script>
</html>
posted @ 2018-09-11 16:29 你若精彩，蝴蝶自来阅读(131) 评论(0) 编辑收藏举报
你若精彩，蝴蝶自来

变换之时钟实现

公告
