js实现时钟代码

大家好，又见面了，我是你们的朋友全栈君。

代码

<!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';
        }
      
        /* 指针 */
        .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;
        }
        </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>
<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 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>

效果图