原生js实现一个简单的时钟(transform属性)

最新推荐文章于 2023-09-14 00:14:17 发布

wxt_

最新推荐文章于 2023-09-14 00:14:17 发布

阅读量537

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103933943

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

图片版请看我的下一篇博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时钟 (调整排版)</title>
    <style>
        body {
            margin: 0;
        }
        .wrapper {
            width: 1200px;
            /* margin: 0 auto; */
        }
        
        /* 时钟 */
        .time {
            width: 350px;
            height: 350px;
            border: 5px solid #ccc;
            border-radius: 50%;
            
            position: relative;
        }
        .time > div {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 设置标签的旋转中心位置 */
            transform-origin: center bottom;
        }

        /* 针  宽度不可以超过 175  */
        .time  #hour {
            width:10px;
            height: 80px;
            background-color: #333;
            
            /* 外边距 */
            margin-top: -80px;
            margin-left: -5px;
            /* 旋转 */
            transform: rotate(0deg);
        }
        .time #minute {
            width:6px;
            height: 120px;
            background-color: green;
             
            /* 外边距 */
            margin-top: -120px;
            margin-left:-3px;
            /* 旋转 */
            transform: rotate(0deg);
        }
        .time  #second {
            width: 4px;
            height: 170px;
            background-color: red;
          
            /* 外边距 */
            margin-top: -170px;
            margin-left:-2px;
            /* 旋转 */
            transform: rotate(0deg);
        }
        .time .circle {
            width: 20px;
            height: 20px;
            background-color: orange;
            margin-left: -10px;
            margin-top: -10px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="time">
            <div id="hour"></div>
            <div id="minute"></div>
            <div id="second"></div>

            <!-- 圆心-->
            <div class="circle"></div>
        </div>
    </div>

    <script>
        // 1.0 获取指定元素 （时分秒）
        var hour = document.getElementById("hour")
        var minute = document.getElementById("minute")
        var second = document.getElementById("second")
        // 2.0 定时器函数
        var timer = setInterval(currentTime,1000)

        // 3.0 编写处理时间逻辑的函数
        function currentTime(){
            // 3.0.1 创建当前日期对象的实例
            var nowTime = new Date()
            // 3.0.2 获取毫秒值
            var ms = nowTime.getMilliseconds()
            // 3.0.3 获取秒数
            var s = nowTime.getSeconds() + ms/1000;
            // 3.0.4 获取分钟
            var m =  nowTime.getMinutes() + s / 60
            // 3.0.5 获取小时
            var h = nowTime.getHours() + m / 60

            // 360 / 12 = 30  时针走的步长
            // 30 / 5 = 6     分针和秒针走的步长

            // 3.0.6 设置时针的角度
            hour.style.transform = "rotate("+(h * 30 )+"deg)"
            minute.style.transform = "rotate("+(m * 6 )+"deg)"
            second.style.transform = "rotate("+(s * 6 )+"deg)"
        }
        // 4.0 调用currentTime函数
        currentTime();
    </script>
</body>
</html>

wxt_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现一个简单的时钟(transform属性)

图片版请看我的下一篇博客<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫