圆盘时钟效果

下课别走

已于 2023-04-08 16:42:07 修改

阅读量199

点赞数

分类专栏： Html 文章标签： html javascript

于 2023-04-07 10:25:58 首次发布

本文链接：https://blog.csdn.net/qq_42862167/article/details/130006176

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该代码示例展示了如何用HTML、CSS和JavaScript创建一个动态的圆盘时钟，包括显示表盘数字、刻度线以及模拟时针、分针和秒针的转动，初始时间自动设置为本地时间。CSS用于设计布局和样式，JavaScript则负责实时更新指针的角度以反映当前时间。

摘要由CSDN通过智能技术生成

目标：
显示表盘数字；显示刻度；显示时针、分针、秒针的动态效果，并且初始时间显示为本地时间

<!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>圆盘时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .clock {
            position: relative;
            margin: 150px auto;
            width: 600px;
            height: 600px;
            border: 6px solid black;
            border-radius: 50%;
        }

        .clock > ul > li {
            width: 3px;
            height: 600px;
            background-color: blue;
        }

        .clock > ul .one {
            transform: translateX(300px);
        }

        .clock > ul .two {
            transform: translate(300px, -100%) rotate(30deg);
        }

        .clock > ul .three {
            transform: translate(300px, -200%) rotate(60deg);
        }

        .clock > ul .four {
            transform: translate(300px, -300%) rotate(90deg);
        }

        .clock > ul .five {
            transform: translate(300px, -400%) rotate(120deg);
        }

        .clock > ul .six {
            transform: translate(300px, -500%) rotate(150deg);
        }

        .clock > div:nth-child(n+2) {
            position: absolute;
            transform-origin: bottom;
        }

        .clock > .indexDial {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            width: 570px;
            height: 570px;
            background-size: 50%;
            background-color: pink;
        }

        .clock > .indexDial > ul > li {
            margin: 0 5px 0 5px;
            display: flex;
            justify-content: space-between;
            font-size: 20px;
        }

        .clock > .indexDial > ul > .one {
            transform: translateY(272px) rotate(120deg);
        }

        .clock > .indexDial > ul > .two {
            transform: translateY(248px) rotate(150deg);
        }

        .clock > .indexDial > ul > .three {
            transform: translateY(220px);
        }

        .clock > .indexDial > ul > .four {
            transform: translateY(193px) rotate(210deg);
        }

        .clock > .indexDial > ul > .five {
            transform: translateY(167px) rotate(240deg);
        }

        .clock > .indexDial > ul > .six {
            transform: translateY(142px) rotate(270deg);
        }

        .clock > .indexDial > ul > .one > span {
            transform: rotate(240deg);
        }

        .clock > .indexDial > ul > .two > span {
            transform: rotate(210deg);
        }

        .clock > .indexDial > ul > .four > span {
            transform: rotate(150deg);
        }

        .clock > .indexDial > ul > .five > span {
            transform: rotate(120deg);
        }

        .clock > .indexDial > ul > .six > span {
            transform: rotate(90deg);
        }

        .clock > .hour {
            top: 120px;
            left: 300px;
            width: 5px;
            height: 180px;
            background-color: #333;
        }

        .clock > .minute {
            top: 100px;
            left: 300px;
            width: 4px;
            height: 200px;
            background-color: darkkhaki;
        }

        .clock > .second {
            top: 80px;
            left: 301px;
            width: 3px;
            height: 220px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="clock">
        <!--刻度线-->
        <ul>
            <li class="one"></li>
            <li class="two"></li>
            <li class="three"></li>
            <li class="four"></li>
            <li class="five"></li>
            <li class="six"></li>
        </ul>

        <!--粉色刻度盘 indexDial-->
        <div class="indexDial">
            <ul>
                <li class="one"><span>1</span> <span>7</span></li>
                <li class="two"><span>2</span> <span>8</span></li>
                <li class="three"><span>9</span> <span>3</span></li>
                <li class="four"><span>4</span> <span>10</span></li>
                <li class="five"><span>5</span> <span>11</span></li>
                <li class="six"><span>6</span> <span>12</span></li>
            </ul>
        </div>

        <!--时针分针秒针-->
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>

    <script type="text/javascript">
        const showTime = () => {
            const date = new Date(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            // 1小时 时针走30度，30度/60min=0.5度/分钟，30/3600=1/120
            document.querySelector(".hour").style.transform = `rotate(${hour * 30 + min * 0.5 + sec / 120}deg)`;
            // 1分钟 分针走6度，6度/60秒=0.1度/秒
            document.querySelector(".minute").style.transform = `rotate(${min * 6 + sec * 0.1}deg)`;
            // 秒针1秒走6度，多少秒走多少度
            document.querySelector(".second").style.transform = `rotate(${sec * 6}deg)`;
        }
        //页面一开始加载就执行
        document.addEventListener("DOMContentLoaded", () => {
            showTime();
        });
        //设置定时器,1s 执行一次
        setInterval(showTime, 1000);
    </script>
</body>
</html>

效果图：

圆盘时钟