js写的简易时钟

最新推荐文章于 2024-05-31 10:24:04 发布

叶随枫舞丶

最新推荐文章于 2024-05-31 10:24:04 发布

阅读量175

点赞数

文章标签： js html css

本文链接：https://blog.csdn.net/qq_44001124/article/details/102736628

版权

<style>
	//表盘的css
	.clock {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 2px solid aqua;
        margin: 100px auto 0;
        position: relative;
    }
    //时针，分针，秒针及表盘中心点的css
    .shizhen {
        width: 6px;
        height: 50px;
        background-color: red;
        position: absolute;
        top: 150px;
        left: 197px;
        transform-origin: bottom;
        z-index: 3;
    }

    .fenzhen {
        width: 4px;
        height: 100px;
        background-color: salmon;
        position: absolute;
        top: 100px;
        left: 198px;
        transform-origin: bottom;
        z-index: 2;
    }

    .miaozhen {
        width: 2px;
        height: 150px;
        background-color: black;
        position: absolute;
        top: 50px;
        left: 199px;
        transform-origin: bottom;
    }

    .zhongxin {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: blue;
        position: absolute;
        top: 195px;
        left: 195px;
        z-index: 4;
    }
    .list li {
        width: 20px;
        text-align: center;
        color: red;
        position: absolute;
        left: 190px;
        transform-origin: 10px 200px;
    }

    .list2 li {
        width: 2px;
        height: 10px;
        background-color: black;
        position: absolute;
        left: 199px;
        transform-origin: 1px 200px;
    }
   </style>

1.body内的内容

<body>
    <div class="warp">
        <div class="clock">
            <div class="shizhen"></div>
            <div class="fenzhen"></div>
            <div class="miaozhen"></div>
            <div class="zhongxin"></div>
            <ul class="list"></ul>//1-12的时间写入这里
            <ul class="list2"></ul>//表盘刻度写在这里
        </div>
    </div>
</body>

		//1.分别获取时钟指针和ul列表
        var shizhen = document.querySelector(".shizhen");
        var fenzhen = document.querySelector(".fenzhen");
        var miaozhen = document.querySelector(".miaozhen");
        var list = document.querySelector(".list");
        var list2 = document.querySelector(".list2");
        
        //1到12的事件刻度
        for (var i = 0; i < 12; i++) {
            var shijian = document.createElement("li");
            shijian.style.transform = "rotate(" + (i * 30) + "deg)";
            shijian.innerText = i;
            list.appendChild(shijian);
            if (i == 0) {
                shijian.innerText = 12;
            }
        }
         //一秒一秒的时间刻度
        for (var j = 0; j < 60; j++) {
            var shijian = document.createElement("li");
            shijian.style.transform = "rotate(" + (j * 6) + "deg)";
            list2.appendChild(shijian);
            if (j % 5 == 0) {
                shijian.style.display = "none";
            }
        }
        var miao = setInterval(function () {
            var time = new Date();
            var sec = time.getSeconds();
            var min = time.getMinutes() + (sec / 60);
            var hour = time.getHours() + (min / 60);

            shizhen.style.transform = "rotate(" + (hour * 30) + "deg)";
            fenzhen.style.transform = "rotate(" + (min * 6) + "deg)";
            miaozhen.style.transform = "rotate(" + (sec * 6) + "deg)";
        }, 1000)

叶随枫舞丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js写的简易时钟

<style> //表盘的css .clock { width: 400px; height: 400px; border-radius: 50%; border: 2px solid aqua; margin: 100px auto 0; position: relative; ...
复制链接

扫一扫