机械时钟

没有写过机械时钟的时候，觉得这种代起码的有几年经验的老码农才写的出来，当理解了transform-origin 这个属性，然后熟悉dom ,机械时钟跟电子时钟的难度差不多。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom:0;
            margin: auto;
            border-radius: 50%;
            border: 2px solid;
        }
        ul>li{
            width: 2px;
            height: 10px;
            background-color: #333;
            list-style-type: none;
            position: absolute;
            left:98px ;
            transform-origin: center 100px;
        }
        ul>li:nth-child(5n){
            height: 15px;
            width: 3px;
        }
        .center{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom:0;
            margin: auto;
            width: 15px;
            height: 15px;
            background-color:green;
            border-radius: 50%;
            z-index: 1;
        }
        .h{
            height: 30px;
            width: 6px;
            background-color: red;
            position: absolute;
            left: 97px;
            top: 70px;
            transform-origin: center bottom;
        }
        .m{
            height: 50px;
            width: 4px;
            background-color: green;
            position: absolute;
            left: 98px;
            top: 50px;
            transform-origin: center bottom;
        }
        .s{
            height: 70px;
            width: 2px;
            background-color: #777;
            position: absolute;
            left: 99px;
            top: 30px;
            transform-origin: center bottom;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="center"></div>
    <div class="h"></div>
    <div class="m"></div>
    <div class="s"></div>
    <ul></ul>
</div>

<script>
    for(var i=0;i<60;i++){
        var ul=document.querySelector("ul");
        var li=document.createElement("li");
        ul.appendChild(li);
        var str=" li:nth-child("+(i+1)+"){transform: rotate("+(i+1)*6+"deg);}";
        var style=document.createElement("style");
        style.append(str);
        document.head.appendChild(style)
    }
    start()
    function start() {
        var date=new Date();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();
        document.querySelector(".s").style.transform="rotate("+s*6+"deg)";
        document.querySelector(".m").style.transform="rotate("+(s/60+m)*6+"deg)";
        document.querySelector(".h").style.transform="rotate("+(h+m/60)*30+"deg)"
    }
    setInterval('start()',1000)
</script>
</body>
</html>

　　

posted @ 2019-11-01 16:44  福超  阅读(220)  评论(0)    收藏  举报