利用css3 transform实现一个时钟

transform:rotate(1deg)



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="clock.css">
    <title>Clock</title>
</head>
<body>
    <div id="clock">
        <div class="pointer" id="hour"></div>
        <div class="pointer" id="minute"></div>
        <div class="pointer" id="second"></div>
    </div>
    <script>
        var hourEle = document.getElementById("hour");
        var minuteEle = document.getElementById("minute");
        var secondEle = document.getElementById("second");
        setInterval(
            function () {

                var d = new Date();
                var hour = d.getHours();
                var minute = d.getMinutes();
                var second = d.getSeconds();
                let hourDeg = (hour%12+minute/60)*30-90;
                let minuteDeg = (minute+second/60)*6-90;
                let secondDeg = second*6-90;
                hourEle.style.transform = "rotate("+hourDeg+"deg)";
                minuteEle.style.transform = "rotate("+minuteDeg+"deg)";
                secondEle.style.transform = "rotate("+secondDeg+"deg)";

            },
            1000
        )
    </script>
</body>
</html>

　　

#clock{
    position: relative;
    width: 100px;
    height:100px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: 1px solid grey;
}
.pointer{
    transform-origin: left center;
}
#hour{
    width: 30px;
    height: 4px;
    background-color: black;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -2px;

}
#minute{
    width: 40px;
    height: 2px;
    background-color: blue;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -1px;

}
#second{
    width: 45px;
    height: 1px;
    background-color: red;
    position: absolute;
    top:50%;
    left: 50%;

}

　　

posted @ 2017-05-20 11:28  IsaacYoung  阅读(548)  评论(0)    收藏  举报