代码实现抖音时钟罗盘

素颜马尾好姑娘i 2023-06-08 06:56 8阅读 0赞

### **HTML代码部分：** ###

<!DOCTYPE html>
    <html lang="en">
    <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">
        <title>罗盘时钟</title>
    
        <link rel="stylesheet" href="clock.css" >
    
    </head>
    <body>
    
    <div id="clock"></div>
    
    <script src="clock.js"></script>
    
    </body>
    </html>

### css代码部分**：** ###

*{
        margin:0;
        padding:0
    }
    html,body{
        width:100%;
        height:100%;
        background-color:#000;
        overflow:hidden
    }
    #clock{
        position:relative;
        width:100%;
        height:100%;
        background:#000
    }
    .label{
        display:inline-block;
        color:#4d4d4d;
        text-align:center;
        padding:0 5px;
        font-size:19px;
        transition:left 1s,top 1s;
        transform-origin:0% 0%
    }

### **js代码部分：** ###

var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
    var dayText=["零一号","零二号","零三号","零四号","零五号","零六号","零七号","零八号","零九号","十号","十一号","十二号","十三号","十四号","十五号","十六号","十七号","十八号","十九号","二十号","二十一号","二十二号","二十三号","二十四号","二十五号","二十六号","二十七号","二十八号","二十九号","三十号","三十一号"];
    var weekText=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var hourText=["零点","零一点","零两点","零三点","零四点","零五点","零六点","零七点","零八点","零九点","零十点","十一点","十二点","十三点","十四点","十五点","十六点","十七点","十八点","十九点","二十点","二十一点","二十二点","二十三点"];
    var minuteText=["零一分","零二分","零三分","零四分","零五分","零六分","零七分","零八分","零九分","零十分","十一分","十二分","十三分","十四分","十五分","十六分","十七分","十八分","十九分","二十分","二十一分","二十二分","二十三分","二十四分","二十五分","二十六分","二十七分","二十八分","二十九分","三十分","三十一分","三十二分","三十三分","三十四分","三十五分","三十六分","三十七分","三十八分","三十九分","四十分","四十一分","四十二分","四十三分","四十四分","四十五分","四十六分","四十七分","四十八分","四十九分","五十分","五十一分","五十二分","五十三分","五十四分","五十五分","五十六分","五十七分","五十八分","五十九分","六十分"];
    var secondsText=["零一秒","零二秒","零三秒","零四秒","零五秒","零六秒","零七秒","零八秒","零九秒","零十秒","十一秒","十二秒","十三秒","十四秒","十五秒","十六秒","十七秒","十八秒","十九秒","二十秒","二十一秒","二十二秒","二十三秒","二十四秒","二十五秒","二十六秒","二十七秒","二十八秒","二十九秒","三十秒","三十一秒","三十二秒","三十三秒","三十四秒","三十五秒","三十六秒","三十七秒","三十八秒","三十九秒","四十秒","四十一秒","四十二秒","四十三秒","四十四秒","四十五秒","四十六秒","四十七秒","四十八秒","四十九秒","五十秒","五十一秒","五十二秒","五十三秒","五十四秒","五十五秒","五十六秒","五十七秒","五十八秒","五十九秒","六十秒"];
    var clock;var monthList=[];
    var zhongList=[];
    var dayList=[];
    var weekList=[];
    var hourList=[];
    var minuteList=[];
    var secondsList=[];
    var isCircle=false;
    var textSet=[[monthText,monthList],
        [dayText,dayList],
        [weekText,weekList],
        [hourText,hourList],
        [minuteText,minuteList],
        [secondsText,secondsList]];
    window.onload=function()
    {
        init();
        setInterval(function()
        {runTime();
        },100);
        changePosition();
        setTimeout(function()
        {changeCircle();
        },2000);
    }
    function init()
    {clock=document.getElementById('clock');
        for(var i=0;
            i<textSet.length;i++)
        {for(var j=0;j<textSet[i][0].length;j++)
        {var temp=createLabel(textSet[i][0][j]);
            clock.appendChild(temp);textSet[i][1].push(temp);
        }
        }
    }
    function createLabel(text)
    {
        var div=document.createElement('div');
        div.classList.add('label');
        div.innerText=text;return div;
    }
    function runTime()
    {
        var now=new Date();
        var month=now.getMonth();
        var day=now.getDate();
        var week=now.getDay();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var seconds=now.getSeconds();
        initStyle();
        var nowValue=[month,day-1,week,hour,minute,seconds];
        for(var i=0;
            i<nowValue.length;
            i++)
        {var num=nowValue[i];
            textSet[i][1][num].style.color='#fff';
        }
        if(isCircle)
        {var widthMid=document.body.clientWidth/2;
            var heightMid=document.body.clientHeight/2;
            for(var i=0;
                i<textSet.length;
                i++){for(var j=0;
                         j<textSet[i][0].length;
                         j++){var r=(i+1)*35+50*i;
                var deg=360/textSet[i][1].length*(j-nowValue[i]);
                var x=r*Math.sin(deg*Math.PI/180)+widthMid;
                var y=heightMid-r*Math.cos(deg*Math.PI/180);
                var temp=textSet[i][1][j];
                temp.style.transform='rotate('+(-90+deg)+'deg)';
                temp.style.left=x+'px';
                temp.style.top=y+'px';
            }
            }
        }
    }
    function initStyle()
    {var label=document.getElementsByClassName('label');
        for(var i=0;
            i<label.length;i++)
        {label[i].style.color='#4d4d4d';
        }
    }
    function changePosition()
    {
        for(let i=0;i<textSet.length;
            i++)
        {
            for(let j=0;
                j<textSet[i][1].length;
                j++){
                let tempX=textSet[i][1][j].offsetLeft+"px";
                let tempY=textSet[i][1][j].offsetTop+"px";
                setTimeout(function(){
                    textSet[i][1][j].style.position="absolute";
                    textSet[i][1][j].style.left=tempX;textSet[i][1][j].style.top=tempY;
                },50);
            }
        }
    }
    function changeCircle()
    {
        isCircle=true;
        clock.style.transform="rotate(90deg)";
    }

### **代码结构：** ###

![20191017173352934.png][]

[20191017173352934.png]: /images/20230531/f55fab8501dc4d61b50e34ae7afc8e30.png

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关罗盘时钟代码

HTML <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYP

短命女/ 2023年10月05日 15:39/ 0 赞/ 38 阅读

相关代码实现抖音时钟罗盘

HTML代码部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

素颜马尾好姑娘i/ 2023年06月08日 06:56/ 0 赞/ 9 阅读

相关 Js实现炫酷仿抖罗盘时钟------Sestid

样式图：（动态旋转的罗盘，刚打开时还有炫酷的折叠变换） ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

不念不忘少年蓝@/ 2023年06月06日 12:03/ 0 赞/ 6 阅读

相关 Unity 制作抖音同款罗马时钟

这个罗马时钟好像出来好久了在某音上，刚看到觉得很好玩，所以自己就想着实现一下效果。下面直接上图 ![20200606093804462.gif][] 先说一下制作

怼烎@/ 2023年02月15日 13:58/ 0 赞/ 3 阅读

相关文字时钟罗盘动态html代码_网红手机壁纸，罗盘时钟壁纸来了！

![e1a10e12c2901082abdfe272f92c8489.png][] 大家好，我是互联网小技巧小编茂茂，每天打开手机你想看不想看都得看到手机壁纸，一个酷炫的手机

迈不过友情╰/ 2023年01月05日 12:14/ 0 赞/ 143 阅读

相关抖音记事本代码html,抖音使用教程抖音表白代码使用方法介绍

抖音最近火了一个表白的代码，想必大家都很想知道到底有哪些，到底应该怎么用呢？下面PConline小编就为各位玩家带来了抖音表白代码使用方法介绍，快来看看吧。 ![114042

向右看齐/ 2022年10月07日 07:58/ 0 赞/ 479 阅读

相关 python实现抖音上比较火的罗盘时钟

抖音上比较有趣的罗盘时钟，今天用turtle来画一下，基本功能实现了，拿来练习一下turtle,感觉还可以吧 turtle的安装 sudo apt-get

╰+哭是因爲堅強的太久メ/ 2022年01月29日 14:17/ 0 赞/ 1233 阅读

相关记，罗盘时钟使用js实现

完成一个如下的罗盘时钟 ![罗盘时钟][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

我就是我/ 2022年01月06日 03:31/ 0 赞/ 338 阅读

相关 jQuery 仿抖音时钟罗盘转动效果

在线预览地址：[http://www.jq22.com/jquery-info21839][http_www.jq22.com_jquery-info21839] 效果

小鱼儿/ 2021年12月18日 19:34/ 0 赞/ 432 阅读

相关自定义 View 之抖音时钟罗盘仪效果

> 博主声明： > > 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 [威威喵][Link 1] 原创，请多支持与指教。 > > [本文首发于此][Link

绝地灬酷狼/ 2021年11月02日 02:38/ 0 赞/ 620 阅读