文字时钟

最新推荐文章于 2024-06-26 09:40:07 发布

「已注销」

最新推荐文章于 2024-06-26 09:40:07 发布

阅读量399

点赞数

本文链接：https://blog.csdn.net/m0_48000173/article/details/106272754

版权

最近很火的罗盘时钟
代码：

<!DOCTYPE html>
<html lang="zh">
<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">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>文字时钟</title>
    </head>
<style>
    *{
        margin:0;
        padding:0;
    }
        html,body{
        position: relative;
        width: 100%;
        height:100%;
        background: black;
    }
        .Hours{
        position: absolute;
        width: 160px;
        height:160px;
        left:50%;
        margin-left:-80px;
        top:50%;
        margin-top:-80px;
    }
        .text{
        position: absolute;
        width: 12px; 
        height:80px;
        left:50%;
        margin-left:-6px;
        top:0px;
        font-size: 12px; 
        word-wrap: break-word; 
        letter-spacing: 16px;
        color:rgb(111,111,111);
        transform-origin:bottom center;
        transition: 1s;
    }
        .Minue{
        position: absolute;
        width: 320px;
        height:320px;
        left:50%;
        margin-left:-160px;
        top:50%;
        margin-top:-160px; 
        transition: 0.3s;
    }
        .Minue .text{
        height:160px;
    }
    .Second{
        position: absolute;
        width: 480px;
        height:480px;
        left:50%;
        margin-left:-240px;
        top:50%;
        margin-top:-240px; 
        transition: 0.3s;
    }
        .Second .text{
        height:240px;
    }
</style>
<body>
    <div class="Hours"></div>
    <div class="Minue"></div>
    <div class="Second"></div>
</body>
<script>
    const Hours = 12;
    const Minue = 60;
    const Second =60;
    const Words=['零', '一', '二', '三', '四', '五', '六', '七', '八', '九','十'];
    Create(Hours,"Hours",false);
    Create(Minue,"Minue"),false;
    Create(Second,"Second",true);
        let date = new Date();
    let nowHours = (date.getHours()>12 ?date.getHours()-12:date.getHours())-1 ;
    let nowMinue = (date.getMinutes()-1);
    let nowSecond = (date.getSeconds());
    let initialSecondAngle = (360/Hours*(nowHours+1)-360/Second*(Second-nowSecond-1));
    ChangeView();
        let secondAngrl=0
    setInterval(()=>{
        $(".Second .text").eq(nowSecond).css({"color":"rgb(111,111,111)"});  
        if(nowSecond<59){          
            nowSecond++;
        }else{
            nowSecond=0;
            $(".Minue .text").eq(nowMinue).css({"color":"rgb(111,111,111)"});    
            nowMinue++;
        }  
                initialSecondAngle +=360/Second;                 
        ChangeView();
    },1000)
    function ChangeView(){
        $(".Hours .text").eq(nowHours).css({"color":"#fff"});
        $(".Minue .text").eq(nowMinue).css({"color":"#fff"});
        $(".Minue").css({
            "transform":"rotate("+(360/Hours*(nowHours+1)-360/Minue*(nowMinue+1))+"deg)"
        })
        $(".Second .text").eq(nowSecond).css({"color":"#fff"});
        $(".Second").css({
            "transform":"rotate("+initialSecondAngle+"deg)"
        })
    }
        function Create(time,parent,Clockwise){
       let angle = 360/time;
       let ShowWords='';
       switch(parent){
          case "Hours":ShowWords="点" ;break; 
          case "Minue":ShowWords="分" ;break; 
          case "Second":ShowWords="秒" ;break; 
       }
              for(let i = 0 ;i<time;i++){
            let curText = $("<div class='text'></div>");
            curText.html(ChangeNumToWords(i+1)+ShowWords);
            if(!Clockwise){
                curText.css({
                    "transform":"rotate("+((i+1)*angle)+"deg)"
                })
            }else{
                curText.css({
                    "transform":"rotate("+(-(i+1)*angle)+"deg)"
                }) 
            }
                        
            $("."+parent+"").append(curText);
       } 
    }
        function ChangeNumToWords(num){
        let WordNum='';
        if(num % 10 == 0 && num !=10){
            WordNum = Words[num / 10]+"十";
            return WordNum
        }
                if(num < 11){
            WordNum = Words[num];
        }else{
            if(num<20){
                WordNum ="十"+Words[num-10];
            }else{
                WordNum=Words[Math.floor(num/10)]+ "十" + Words[num%10];
            }
        }
                return WordNum;
    }
</script>
</html>