用编程做出抖音上很火的时钟效果

反正，我的抖音没人看，别人都有几十万个赞什么的。

发到思否上来，大家交流下~

主要用到原生态的 JS+CSS3。

具体不解释了，看注释：

 
<!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");
 
    /*
    * 找所有的东西标签函数
    * */
    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)
        },6000)
 
    };
    main();
   
</script>
 
</body>
</html>

用编程做出抖音上很火的时钟效果

Java专职

引用和评论

JVM基础篇

在Java程序中监听mysql的binlog

喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿

Bitmap 和布隆过滤器傻傻分不清？你这不应该啊

Jerry和您聊聊Chrome开发者工具

Spring 实现 3 种异步流式接口，干掉接口超时烦恼

💢线上高延迟请求排查

用编程做出抖音上很火的时钟效果

Java专职

引用和评论

JVM基础篇

在Java程序中监听mysql的binlog

喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿

Bitmap 和 布隆过滤器傻傻分不清？你这不应该啊

Jerry和您聊聊Chrome开发者工具

Spring 实现 3 种异步流式接口，干掉接口超时烦恼

💢线上高延迟请求排查

Bitmap 和布隆过滤器傻傻分不清？你这不应该啊