时钟

HTML时钟制作

最新推荐文章于 2019-06-29 09:02:14 发布

moonlight201868

最新推荐文章于 2019-06-29 09:02:14 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/moonlight201868/article/details/80764616

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: pink;
        }
        .case
        {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: black;
        }
        .clock
        {
            width: 500px;
        }
        .hour{
            position: relative;
            top: -554px;
            left: 239px;
        }
        .minute
        {
            position: relative;
            top: -552px;
            left: 202px;
        }
        .second
        {
            position: relative;
            top: -554px;
            left: 168px;
        }

    </style>
        </head>
<body>
          <div class="case">
        <img class="clock" src="images/clock.jpg">
        <img class="hour" src="images/hour.png">
        <img class="minute" src="images/minute.png">
        <img class="second" src="images/second.png">
          </div>
        </body>
        <script>
            var date=new Date()
            var hours=date.getHours()
            var minutes=date.getMinutes()
            var seconds=date.getSeconds()
            var hour=document.getElementsByClassName("hour")[0]
            var minute=document.getElementsByClassName("minute")[0]
            var second=document.getElementsByClassName("second")[0]

            hour.style.transform="rotate("+(hours*30+minutes*0.5)+"deg)"
            minute.style.transform="rotate("+(minutes*6+seconds*0.1)+"deg)"
            second.style.transform="rotate("+seconds*6+"deg)"

            function time() {
                var date=new Date()
                var hours=date.getHours()
                var minutes=date.getMinutes()
                var seconds=date.getSeconds()
                var hour=document.getElementsByClassName("hour")[0]
                var minute=document.getElementsByClassName("minute")[0]
                var second=document.getElementsByClassName("second")[0]
                
                hour.style.transform="rotate("+(hours*30+minutes*0.5)+"deg)"
                minute.style.transform="rotate("+(minutes*6+seconds*0.1)+"deg)"
                second.style.transform="rotate("+seconds*6+"deg)"
            }
            setInterval(time,1000)
        </script>
</html>