html css js 实现简易时钟

Karbell

已于 2022-11-19 09:06:19 修改

阅读量654

点赞数 1

分类专栏：小demo合集文章标签： css javascript html5

于 2022-11-18 22:25:19 首次发布

本文链接：https://blog.csdn.net/weixin_42577332/article/details/127930263

版权

小demo合集专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本思路：

1. 通过日期对象获取当前时间

2. 利用getHours, getMinutes, getSeconds获取当前的时分秒

3. 分针的位置 = rotate（当前分钟*6 deg）

4. 秒针的位置 = rotate（当前秒数*6 deg）

5. 时针的位置 = rotate（当前小时*30 deg）

6. 利用setInterval每秒钟重新移动一次时分秒针的位置

以下是html和js代码


<body>
    <div> <!--表盘盒子-->
        <span></span>  <!--秒针盒子-->
        <b></b>  <!--分针盒子-->
        <i></i>  <!--时针盒子-->
        <em></em>  <!--表盘中心圆点-->
    </div>

    <script>
        // 获取时分秒表针
        let sec = document.querySelector('span') 
        let min = document.querySelector('b') 
        let hour = document.querySelector('i') 
        
        // 利用日期对象获取当前时分秒，将时分秒转化为指针的旋转度数
        let timeChange = function () {
            let timer = new Date() 
            let s = timer.getSeconds()
            let m = timer.getMinutes()
            let h = timer.getHours()
            h = h > 12 ? h-12 : h 
            sec.style.transform = `rotate(${s*6}deg)`
            min.style.transform = `rotate(${m*6}deg)`
            hour.style.transform = `rotate(${h*30}deg)`
        }        

       // 用setInterval函数每秒钟重绘一次指针
        setInterval(timeChange, 1000)
    </script>
</body>

以下是css代码

    div {
            position: relative;
            width: 100px;
            height: 100px;
            background: #fff;
            border-radius: 50%;
            border: 6px solid #000;
        }

        span {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            top: 10px;
            width: 3px;
            height: 40px;
            background-color: #000;
            transform-origin: bottom;
        }

        b {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            top: 15px;
            width: 4px;
            height: 35px;
            background-color: red;
            transform-origin: bottom;
        }

        i {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            top: 20px;
            width: 5px;
            height: 30px;
            background-color: blueviolet;
            transform-origin: bottom;
        }

        em {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #000;
        }

以下是运行效果：

Karbell

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html css js 实现简易时钟

2. 利用getHours, getMinutes, getSeconds获取当前的时分秒。6. 利用setInterval每秒钟重新移动一次时分秒针的位置。5. 时针的位置 = rotate（当前小时*15 deg）3. 分针的位置 = rotate（当前分钟*6 deg）4. 秒针的位置 = rotate（当前秒数*6 deg）1. 通过日期对象获取当前时间。以下是html和js代码。
复制链接

扫一扫

专栏目录