「原码」HTML+CSS+JavaScript原生罗盘电子时钟-追梦人

温馨提示：本文最后更新于2025-06-17 01:53:57，某些文章具有时效性，若有错误或已失效，请在下方留言！

AI智能摘要

This article presents an HTML, CSS, and JavaScript implementation of a compass-style digital clock. The code defines functions to create and position elements for displaying the month, day, hour, minute, and second, each arranged in a circular layout within a 200x200 pixel container. The clock face visually highlights the current values by applying a rotation to the parent container, and translations to position the elements appropriately. The main function initializes the clock elements and sets intervals to update the display every second using the Date object to track the current time.

— 此摘要由AI分析文章内容生成，仅供参考。

图片[1]-「原码」HTML+CSS+JavaScript原生罗盘电子时钟-追梦人


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗盘时钟</title>
    <style>
        html{
            background: rgb(50, 185, 248);
            color: rgb(51, 51, 51);
            font-size: 12px;
            overflow:hidden;
        }
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: block;
            float: left;
        }
        .on{
            color: #fff;
        }
        .wrapper{
            width: 200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        .wrapper .timebox{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left:0;
            border-radius: 100%;
            transition: all 0.5s;
        }
        .timebox span{
            transition: all 0.5s;
            float: left;
        }
        .wrapper  .timebox span{
            position: absolute;
            left:50%;
            top:50%;
            width: 40px;
            height: 18px;
            margin-top: -9px;
            margin-left: -20px;
            text-align: right;
        }
 
    </style>
</head>
<body>
 
<div id="wrapper">
    <div class="timebox yuebox" id="yueBox"></div>
    <div class="timebox riqiBox" id="riqiBox"></div>
    <div class="timebox hourbox" id="hourbox"></div>
    <div class="timebox minutebox" id="minutebox"></div>
    <div class="timebox secondbox" id="secondbox"></div>
</div>
 
 
<script>
 
    let wrapper = document.getElementById("wrapper");
    let yueBox = document.getElementById("yueBox");
    let riqiBox = document.getElementById("riqiBox");
    let hourbox = document.getElementById("hourbox");
    let minutebox = document.getElementById("minutebox");
    let secondbox = document.getElementById("secondbox");
 
    /*
    * 找所有的东西标签函数
    * */
    let findSiblings = function( tag ){
        let parent = tag.parentNode;
        let childs = parent.children;
        let sb = [];
        for(let i=0 ; i <= childs.length-1 ; i++){
            if( childs[i]!==tag){
                sb[sb.length] = childs[i];
            }
        }
        return  sb ;
    };
 
    /*
    * 去掉所有兄弟的类
    * */
    let removeSiblingClass =function( tag ){
        let sb = findSiblings( tag );
        for(let i=0 ;  i <= sb.length-1 ; i++){
            sb[i].className = "";
        }
    };
 
    /*
    * 初始化月份函数
    * */
    let initMonth = function(){
      for(let i=1; i<=12; i++){
            let span = document.createElement("span");
            span.innerHTML = i+"月";
            yueBox.appendChild( span );
      }
    };
 
    // 初始化日期
    let initDate = function(){
        for(let i=1; i<=31; i++){
            let span = document.createElement("span");
            span.innerHTML = i+"日";
            riqiBox.appendChild( span );
        }
    };
 
    // 初始化小时，分钟，秒
    let initHour = function(){
        for(let i=0; i<=23; i++){
            let h = i ;
            let span = document.createElement("span");
            if( h<10){
                h="0"+h;
            }
            span.innerHTML = h +"点";
            hourbox.appendChild( span );
        }
    };
    let initMinute = function(){
        for(let i=0; i<=59; i++){
            let  f = i ;
            let span = document.createElement("span");
            if( f<10){
                f="0"+f;
            }
            span.innerHTML = f +"分";
            minutebox.appendChild( span );
        }
    };
    let initSecond = function(){
        for(let i=0; i<=59; i++){
            let  miao = i ;
            let span = document.createElement("span");
            if( miao<10){
                miao="0"+miao;
            }
            span.innerHTML = miao +"秒";
            secondbox.appendChild( span );
        }
    };
 
    // 时间文字样式切换函数
    let changeTime = function(tag){
        tag.className = "on";
        removeSiblingClass( tag );
    };
 
    /*
    * 初始化日历函数
    * */
    let initRili = function(){
        initMonth(); // 初始化月份
        initDate(); // 初始化日期
        initHour(); // 小时
        initMinute();
        initSecond();
    };
 
    /*
    * 展示当前时间
    * 参数：mydate 时间对象
    * */
    let  showNow = function( mydate ){
 
        let yue = mydate.getMonth() ;
        let riqi = mydate.getDate();
        let hour = mydate.getHours()  ;
        let minute = mydate.getMinutes();
        let second = mydate.getSeconds();
        // 时间文字样式切换函数
        changeTime( yueBox.children[yue] );
        changeTime( riqiBox.children[riqi-1] );
        changeTime( hourbox.children[hour] );
        changeTime( minutebox.children[minute] );
        changeTime( secondbox.children[second] );
 
    };
 
    // 展示时间圆圈函数
    // tag：目标
    // num：数字数量
    // dis：圆圈半径
    let textRound = function(tag,num,dis){
        let span = tag.children ;
        for(let i=0 ; i<=span.length-1; i++){
            span[i].style.transform="rotate("+ (360/span.length)*i+"deg)  translateX("+dis+"px)" ;
        }
    };
    /*
    * 旋转指定“圆圈”指定度数
    * */
    let rotateTag = function(tag , deg){
        tag.style.transform = "rotate("+deg+"deg)";
    };
 
    let main = function(){
        initRili(); // 初始化日历
 
        setInterval(function(){
            let mydate = new Date();
            showNow( mydate ); // 展示当前时间
        },1000);
 
        //  n秒后，摆出圆形
        setTimeout(function(){
            wrapper.className = "wrapper";
            textRound(yueBox,12,40);
            textRound(riqiBox,31,80);
            textRound(hourbox,24,120);
            textRound(minutebox,60,160);
            textRound(secondbox,60,200);
            setInterval(function(){
                let mydate = new Date();
                rotateTag( yueBox , -30*mydate.getMonth());
                rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );
                rotateTag( hourbox , -360/24*mydate.getHours());
                rotateTag( minutebox , -6*mydate.getMinutes());
                rotateTag( secondbox , -6*mydate.getSeconds());
            },1000)
        },50)
 
    };
    main();
   
</script>
 
</body>
</html>

本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:dream@dreamren.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。