前端代码编写小时钟

倪行

已于 2022-03-31 09:17:37 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html5 css

于 2022-03-31 09:16:37 首次发布

本文链接：https://blog.csdn.net/zst0910/article/details/123862871

本文介绍如何利用前端技术JavaScript、HTML5和CSS实现一个小时钟。难点在于确保指针在正确位置并能平滑旋转，最终效果令人满意。

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

前端代码编写小时钟

没有用到图片，指针也是自己用自己写的。主要难度就在于指针位置的固定与旋转。

* {
   
   
            margin: 0;
            padding: 0;
        }

        #one {
   
   
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            width: 750px;
            height: 150px;
            border: 1px solid;
            border-radius: 10px;
            background: linear-gradient(#086cc1, #6ba9e1);
            color: white;
        }

        li {
   
   
            display: flex;
            justify-content: center;
            align-items: center;
            list-style: none;
            float: left;
            width: 250px;
            height: 100px;
        }

        #clock {
   
   
            width: 100px;
            height: 100px;
            border: 1px solid;
            border-radius: 50px;
            position: relative;
            left: 30px;
            transform: rotate(-90deg);
        }

        #clock .bg {
   
   
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
        }

        #clock .point {
   
   
            position: absolute;
            left: 50%;
            top: 50%;
        }

        #clock #hour {
   
   
            width: 30px;
            height: 2px;
            background: #fff;
            margin: -1px 0 0 0 0;
            transform-origin: 0 0.5px;
            border-radius: 10px;
        }

        #clock #minute {
   
   
            width: 40px;
            height: 2px