Use programming to make a hot clock effect on vibrato

Posted Jun 16, 20203 min read

Anyway, no one watched my vibrato, others have hundreds of thousands of likes or something.

Send it to think about it, let's talk~

The original ecological JS+CSS3 is mainly used.

I won't explain it specifically, see the note:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background:#000;
            color:#666;
            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");

    /*
    * Find all things tag function
    * */
    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;
    };

    /*
    * Remove all brothers
    * */
    let removeSiblingClass =function(tag){
        let sb = findSiblings(tag);
        for(let i=0; i <= sb.length-1; i++){
            sb[i].className = "";
        }
    };

    /*
    * Initialize month function
    * */
    let initMonth = function(){
      for(let i=1; i<=12; i++){
            let span = document.createElement("span");
            span.innerHTML = i+" ";
            yueBox.appendChild(span);
      }
    };

    //Initialization date
    let initDate = function(){
        for(let i=1; i<=31; i++){
            let span = document.createElement("span");
            span.innerHTML = i+" ";
            riqiBox.appendChild(span);
        }
    };

    //Initialize hours, minutes, seconds
    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 + "dot";
            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 + "second";
            secondbox.appendChild(span);
        }
    };

    //Time text style switching function
    let changeTime = function(tag){
        tag.className = "on";
        removeSiblingClass(tag);
    };

    /*
    * Initialize calendar function
    * */
    let initRili = function(){
        initMonth(); //Initialization month
        initDate(); //Initialization date
        initHour(); //hour
        initMinute();
        initSecond();
    };

    /*
    * Show current time
    * Parameter:mydate time object
    * */
    let showNow = function(mydate){

        let yue = mydate.getMonth();
        let riqi = mydate.getDate();
        let hour = mydate.getHours();
        let minute = mydate.getMinutes();
        let second = mydate.getSeconds();
        //Time text style switching function
        changeTime(yueBox.children[yue]);
        changeTime(riqiBox.children[riqi-1]);
        changeTime(hourbox.children[hour]);
        changeTime(minutebox.children[minute]);
        changeTime(secondbox.children[second]);

    };

    //Show time circle function
    //tag:target
    //num:number of digits
    //dis:circle radius
    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)";
        }
    };
    /*
    * Rotate specified "circle" specified degree
    * */
    let rotateTag = function(tag, deg){
        tag.style.transform = "rotate("+deg+"deg)";
    };

    let main = function(){
        initRili(); //Initialize the calendar

        setInterval(function(){
            let mydate = new Date();
            showNow(mydate); //Show the current time
        },1000);

        //n seconds later, put out a circle
        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)
        },6000)

    };
    main();

</script>

</body>
</html>