js实现动态时钟

最新推荐文章于 2024-05-17 14:01:49 发布

ice_bear-

最新推荐文章于 2024-05-17 14:01:49 发布

阅读量2.7k

点赞数 5

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/99784788

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

发现一个超级好用的gif图工具"抠抠视频秀"，很好用也不占内存，长这样

效果图
设计思路

1.调整各个指针的位置关系（transform-origin:）
2. 计算好各个针之间的度数关系（分针和时针的度数都不仅仅由自身时间决定）
3. 由于指针初始摆放位置为三点钟方向，所以相对于摆放位置，要正常显示时间需要在计算好的角度基础上-90

关于转动角度的关系具体如下：1 hour=60min =3600s
先分别转动对应针的角度，此时应考虑联动。秒针每秒走6度；
分针每分钟走6度（在考虑秒针对分针的影响，将秒数换算成分钟）
时针每小时走30度，考虑分针和秒针的影响

代码如下
样式

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        #block {
            overflow: hidden;
            position: relative;
            width: 600px;
            height: 600px;
            margin: auto;
            background: url("./clock/表.png") no-repeat;
        }

        #block > div {
            position: absolute;
        }

        .hours {
            width: 110px;
            height: 80px;
            left: 125px;
            top: 95px;
            background-image: url("./clock/时2.png");
            background-size: 100%;
            transform-origin: 20% 70%;
        }

        .minute {
            width: 110px;
            height: 100px;
            left: 136px;
            top: 91px;
            background-image: url("clock/分2.png");
            background-size: 100%;
            transform-origin: 10% 60%;
        }

        .second {
            width: 200px;
            height: 110px;
            left: 90px;
            top: 50px;
            background-image: url("./clock/秒.png");
            background-size: 100%;
            transform-origin: 30% 90%;
        }
    </style>

html

<div id="block">
    <div class="hours"></div>
    <div class="minute"></div>
    <div class="second"></div>
</div>

<script>
    setInterval(function () {
        var hours = document.getElementsByClassName("hours")[0];
        var minute = document.getElementsByClassName("minute")[0];
        var second = document.getElementsByClassName("second")[0];
        var date = new Date();
        var hour = date.getHours(); //调取当前时间的小时
        // console.log(hour);
        var min = date.getMinutes(); //调取当前时间的分钟
        var sec = date.getSeconds(); //调取当前时间的秒

        second.style.transform = "rotate(" + ((sec * 6) - 90) + "deg)";
        minute.style.transform = "rotate(" + (((min + (sec / 60)) * 6) - 90) + "deg)";
        /*  */
        hours.style.transform = "rotate(" + (((hour + (sec / 3600) + (min / 60)) * 30) - 90) + "deg)";
        /**/
    }, 1000)
</script>

最后分享一个见到的实现很棒的动态时钟，但是没有使用图片，而是代码绘制！效果如下
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 全局 */
        *{
            margin:0;
            padding:0;
        }
        .clock{
            width:400px;
            height:400px;
            border:10px solid #333;
            box-shadow: 0 0 20px 3px #444 inset;
            border-radius:210px;
            position:relative;
            margin:5px auto;
            z-index:10;
            background-color:#f6f6f6;
        }
        /* 时钟数字 */
        .clock-num{
            width:40px;
            height:40px;
            font-size:22px;
            text-align:center;
            line-height:40px;
            position:absolute;
            z-index:8;
            color:#555;
            font-family:fantasy, 'Trebuchet MS';
        }
        .em_num{
            font-size:28px;
        }
        /* 指针 */
        .clock-line{
            position:absolute;
            z-index:20;
        }
        .hour-line{width:100px;
            height:4px;
            top:198px;
            left:200px;
            background-color:#000;
            border-radius:2px;
            transform-origin:0 50%;
            box-shadow:1px -3px 8px 3px #aaa;
        }
        .minute-line{
            width:130px;
            height:2px;
            top:199px;
            left:190px;
            background-color:#000;
            transform-origin:7.692% 50%;
            box-shadow:1px -3px 8px 1px #aaa;
        }
        .second-line{
            width:170px;
            height:1px;
            top:199px;
            left:180px;
            background-color:#f60;
            transform-origin:11.765% 50%;
            box-shadow:1px -3px 7px 1px #bbb;
        }
        /* 原点 */
        .origin{
            width:20px;
            height:20px;
            border-radius:10px;
            background-color:#000;
            position:absolute;
            top:190px;
            left:190px;
            z-index:14;
        }

        /* 日期 时间 */
        .date-info{
            width:160px;
            height:28px;
            line-height:28px;
            text-align:center;
            position:absolute;
            top:217px;
            left:120px;
            z-index:11;
            color:#555;
            font-weight:bold;
        }
        .time-info{
            width:92px;
            height:30px;
            line-height:30px;
            text-align:center;
            position:absolute;
            top:270px;
            left:154px;
            z-index:11;
            background-color:#555;
            padding:0;
            box-shadow:0 0 9px 2px #222 inset;
        }
        .time{
            width:30px;
            height:30px;
            text-align:center;
            float:left;
            color:#fff;
            font-weight:bold;
        }
        #minute-time{
            border-left:1px solid #fff;
            border-right:1px solid #fff;
        }

        /* 刻度 */
        .clock-scale{
            width:195px;
            height:2px;
            transform-origin:0% 50%;
            z-index:7;
            position:absolute;
            top:199px;
            left:200px;
        }
        .scale-show{
            width:12px;
            height:2px;
            background-color:#555;
            float:left;
        }
        .scale-hidden{
            width:183px;
            height:2px;
            float:left;
        }
    </style>
</head>
<body>
<div class="clock" id="clock">
    <!-- 原点 -->
    <div class="origin"></div>

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

    <!-- 日期 -->
    <div class="date-info" id="date-info"></div>
    <!-- 时间 -->
    <div class="time-info" >
        <div class="time" id="hour-time"></div>
        <div class="time" id="minute-time"></div>
        <div class="time" id="second-time"></div>
    </div>
</div>

<script>
    (function(){
        window.onload=initNumXY(200, 160, 40,40);
        var hour_line = document.getElementById("hour-line");
        var minute_line = document.getElementById("minute-line");
        var second_line = document.getElementById("second-line");
        var date_info = document.getElementById("date-info");
        var week_day = [
            '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
        ];
        var hour_time = document.getElementById("hour-time");
        var minute_time = document.getElementById("minute-time");
        var second_time = document.getElementById("second-time");
        function setTime(){
            var this_day = new Date();
            var hour = (this_day.getHours() >= 12) ?
                    (this_day.getHours() - 12) : this_day.getHours();
            var minute = this_day.getMinutes();
            var second = this_day.getSeconds();
            var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6);
            var year = this_day.getFullYear();
            var month = ((this_day.getMonth() + 1) < 10 ) ?
            "0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1);
            var date = (this_day.getDate() < 10 ) ?
            "0"+this_day.getDate() : this_day.getDate();
            var day = this_day.getDay();
            hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
            minute_line.style.transform = 'rotate(' + (minute*6 - 90) + 'deg)';
            second_line.style.transform = 'rotate(' + (second*6 - 90)+'deg)';
            date_info.innerHTML =
                    year + "-" + month + "-" + date + " " + week_day[day];
            hour_time.innerHTML = (this_day.getHours() < 10) ?
            "0" + this_day.getHours() : this_day.getHours();
            minute_time.innerHTML = (this_day.getMinutes() < 10) ?
            "0" + this_day.getMinutes() : this_day.getMinutes();
            second_time.innerHTML = (this_day.getSeconds() < 10) ?
            "0" + this_day.getSeconds():this_day.getSeconds();
        }
        setInterval(setTime, 1000);

        function initNumXY(R, r, w, h){
            var numXY = [
                {
                    "left" : R + 0.5 * r - 0.5 * w,
                    "top" : R - 0.5 * r * 1.73205 - 0.5 * h
                },
                {
                    "left" : R + 0.5 * r * 1.73205 - 0.5 * w,
                    "top" : R - 0.5 * r - 0.5 * h
                },
                {
                    "left" : R + r - 0.5 * w,
                    "top" : R - 0.5 * h
                },
                {
                    "left" : R + 0.5 * r * 1.73205 - 0.5 * w,
                    "top" : R + 0.5 * r - 0.5 * h
                },
                {
                    "left" : R + 0.5 * r - 0.5 * w,
                    "top" : R + 0.5 * r * 1.732 - 0.5 * h
                },
                {
                    "left" : R - 0.5 * w,
                    "top" : R + r - 0.5 * h
                },
                {
                    "left" : R - 0.5 * r - 0.5 * w,
                    "top" : R + 0.5 * r * 1.732 - 0.5 * h
                },
                {
                    "left" : R - 0.5 * r * 1.73205 - 0.5 * w,
                    "top" : R + 0.5 * r - 0.5 * h
                },
                {
                    "left" : R - r - 0.5 * w,
                    "top" : R - 0.5 * h
                },
                {
                    "left" : R - 0.5 * r * 1.73205 - 0.5 * w,
                    "top" : R - 0.5 * r - 0.5 * h
                },
                {
                    "left" : R - 0.5 * r - 0.5 * w,
                    "top": R - 0.5 * r * 1.73205 - 0.5 * h
                },
                {
                    "left" : R - 0.5 * w,
                    "top" : R - r - 0.5 * h
                }
            ];
            var clock = document.getElementById("clock");
            for(var i = 1; i <= 12; i++){
                if(i%3 == 0) {
                    clock.innerHTML += "<div class='clock-num em_num'>"+i+"</div>";
                } else {
                    clock.innerHTML += "<div class='clock-num'>" + i + "</div>";
                }
            }
            var clock_num = document.getElementsByClassName("clock-num");
            for(var i = 0; i < clock_num.length; i++) {
                clock_num[i].style.left = numXY[i].left + 'px';
                clock_num[i].style.top = numXY[i].top + 'px';
            }
            for(var i = 0; i < 60; i++) {
                clock.innerHTML += "<div class='clock-scale'> " +
                        "<div class='scale-hidden'></div>" +
                        "<div class='scale-show'></div>" +
                        "</div>";
            }
            var scale = document.getElementsByClassName("clock-scale");
            for(var i = 0; i < scale.length; i++) {
                scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
            }
        }
    })();
</script>
</body>
</html>