抖音罗盘时钟

最新推荐文章于 2025-03-12 11:26:21 发布

搞开发的小哥哥

最新推荐文章于 2025-03-12 11:26:21 发布

阅读量6.7k

点赞数 21

本文链接：https://blog.youkuaiyun.com/LIAOJIASONG1024/article/details/102370406

版权

本文介绍了如何使用HTML、CSS和JavaScript制作抖音风格的罗盘时钟，通过代码示例展示每个部分的实现，鼓励读者自行研究和动手实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

***其实很早以前就想发了，很多东西其实并不难，只要多动手动脑就行了，下面直接上代码，其他的自己下去慢慢研究吧！

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>js仿抖罗盘时钟</title>

<link rel="stylesheet" href="css/demo.css">

</head>
<body>

<div id="clock"></div>

<script src="js/demo.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%
}

JavaScript部分代码：

var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
var dayText=["零一号","零二号","零三号","零四号","零五号","零六号","零七号","零八号","零九号","十号","十一号","十二号","十三号","十四号","十五号","十六号","十七号","十八号","十九号","二十号","二十一号","二十二号","二十三号","二十四号","二十五号","二十六号","二十七号",