刻度时钟简易版_简洁时钟 csdn-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128688708

该HTML代码实现了一个简易的刻度时钟和电子时钟，两者时间与北京时间实时同步。通过JavaScript获取当前时间，并利用CSS3的旋转效果，使得秒针、分针和时针每秒移动相应的角度。页面中还包含一个定时器，每秒更新一次时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：上方是简易的刻度时钟，下方是电子时钟，上下的时间需与北京时
间实时对应。
实现原理：获取时间：getdate
时钟效果：秒钟是1秒钟走6度，分钟是一秒钟走6度，时钟是1小时转一下30度
设置一个定时器每秒钟更新一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            position: relative;
        }

        .bigbox {
            width: 613px;
            height: 600px;
            border: 5px solid black;
            border-radius: 50%;
            margin: 0 auto;
            box-shadow: 20px 23px 23px gray;
        }

        .littlebox {
            width: 500px;
            height: 400px;
            line-height: 400px;
            font-size: 18px;
            font-weight: bolder;
            margin: 0 auto;
        }

        .bigbox span {
            border: 1px solid black;
            width: 10px;
            height: 10px;
            background-color: black;
            border-radius: 50%;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        #second {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 4px;
            height: 250px;
            background-color: black;
            z-index: 3;
            transform: translate(75%, -100%) rotate(0deg);
            transform-origin: bottom center;

        }

        #minute {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 200px;
            background-color: black;
            transform: translate(75%, -100%) rotate(0deg);
            transform-origin: bottom center;

        }

        #hour {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 150px;
            background-color: black;
            transform: translate(75%, -100%) rotate(0deg);
            transform-origin: bottom center;

        }

        .bigbox ul li {
            width: 3px;
            height: 5px;
            background-color: gray;
            position: absolute;
            left: 50%;
            top: 10px;
            transform-origin: center 292px;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <ul></ul>
        <span></span>
        <div id="second"></div>
        <div id="minute"></div>
        <div id="hour"></div>
    </div>
    <div class="littlebox">

    </div>
    <script>
        ul = document.querySelector("ul")
        console.log(ul)
        lis = ""
        for (index = 0; index < 60; index++) {
            lis += `<li style="transform:rotate(${index * 6}deg)"></li>`
            ul.innerHTML = lis
        }

        var updatetime = setInterval(function () {
            time = new Date()
            var hours = time.getHours()
            var minutes = time.getMinutes()
            var seconds = time.getSeconds()
            var timebox = document.querySelector(".littlebox")
            hour.style.transform = `translate(75%,-100%) rotate(${hours * 30}deg)`
            minute.style.transform = `translate(75%,-100%) rotate(${minutes * 6}deg)`
            second.style.transform = `translate(75%,-100%) rotate(${seconds * 6}deg)`



            timebox.innerHTML = time




        }, 1000)


    </script>
</body>

</html>

在这里插入图片描述