简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > js案例时钟
Blogger Information
Blog 37
fans 0
comment 1
visits 28404
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js案例时钟
kong
Original
797 people have browsed it

微信图片_20200708140612.png


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>时钟</title>

</head>

<style>

    html,

    body {

        height: 100%;

        overflow: hidden;

    }

    

    * {

        padding: 0;

        margin: 0;

    }

    

    ul {

        list-style: none;

    }

    

    #wrap {

        width: 200px;

        height: 200px;

        border: 2px solid #000;

        border-radius: 50%;

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

    }

    

    #wrap ul li {

        width: 2px;

        height: 6px;

        position: absolute;

        background-color: #000;

        left: 50%;

        top: 0;

        margin-left: -1px;

        transform-origin: center 100px;

    }

    

    #wrap ul li:nth-child(5n+1) {

        height: 10px;

    }

    

    .hour {

        position: absolute;

        left: 97px;

        width: 6px;

        top: 70px;

        height: 30px;

        background: blue;

        transform-origin: center bottom;

    }

    

    .min {

        position: absolute;

        left: 98px;

        top: 50px;

        width: 4px;

        height: 50px;

        background: brown;

        transform-origin: center bottom;

    }

    

    .sec {

        position: absolute;

        left: 99px;

        top: 30px;

        width: 2px;

        height: 70px;

        background: rgb(248, 3, 3);

        transform-origin: center bottom;

    }

    

    .icon {

        position: absolute;

        left: 90px;

        top: 90px;

        width: 20px;

        height: 20px;

        border-radius: 50%;

        background: pink;

    }

</style>


<body>

    <div id="wrap">

        <ul></ul>

        <div class="hour"></div>

        <div class="min"></div>

        <div class="sec"></div>

        <div class="icon"></div>

    </div>

   <script>
        window.onload = function() {
            //获取时间针
            var hourNode = document.querySelector("#wrap>.hour");
            var minNode = document.querySelector("#wrap>.min");
            var secNode = document.querySelector("#wrap>.sec");
            //获取ul容器
            var ulNode = document.querySelector("#wrap>ul");
            //创建一个li的容器
            var liHtml = "";
            //创建一个style标签
            var styleNode = document.createElement("style");
            //创建一个style容器
            var liStyle = "";
            //创建li
            for (var i = 0; i < 60; i++) {
                //追加到li的容器里
                liHtml += "<li></li>";
                //追加样式
                liStyle += "#wrap ul li:nth-child(" + (i + 1) + ") {transform: rotate(" + (i * 6) + "deg)}";
                styleNode.innerHTML = liStyle;
                document.head.appendChild(styleNode);
                //liHtml追加到ul里
                ulNode.innerHTML = liHtml;
            };
            //先执行
            move();
            //定时器
            setInterval(move, 1000);
            function move() {
                //获取时间戳
                var date = new Date();
                var s = date.getSeconds();
                var m = date.getMinutes() + s / 60;
                var h = date.getHours() + m / 60;
                //计算每秒各自旋转的角度
                hourNode.style.transform = "rotate(" + (30 * h) + "deg)";
                minNode.style.transform = "rotate(" + (6 * m) + "deg)";
                secNode.style.transform = "rotate(" + (6 * s) + "deg)";
            };
        }
    </script>

</body>


</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！