抖音同款八卦时钟

尘世壹俗人

已于 2022-09-03 17:00:23 修改

阅读量513

点赞数

分类专栏： Jquery CSS

于 2021-11-10 23:32:11 首次发布

本文链接：https://blog.csdn.net/dudadudadd/article/details/121259270

版权

web

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		    * {
     
		        margin: 0;
		        padding: 0;
		        background: #E9C2A6;
		
		    }
		
		    html,
		    body {
     
		        width: 100%;
		        height: 100%;
		        overflow: hidden;
		    }
		
		    #clock {
     
		        position: relative;
		        width: 100%;
		        height: 100%;
		    }
		
		    .label {
     
		        display: inline-block;
		        text-align: center;
		        padding: 5px 5px;
		        font-size: 20px;
		        font-family: 楷体;
		        transition: left 1s, top 1s;
		        transform-origin: 0 0;
		    }
		</style>

	</head>
	
	<body>
		<div id="clock"></div>
	</body>
	
	<script>
	    let monthText = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
	    let dayText = ["一号", "二号", "三号", "四号", "五号", "六号", "七号", "八号", "九号", "十号", "十一号", "十二号", "十三号", "十四号", "十五号", "十六号", "十七号", "十八号", "十九号", "二十号", "二十一号", "二十二号", "二十三号", "二十四号", "二十五号", "二十六号",
	        "二十七号", "二十八号", "二十九号", "三十号", "三十一号"
	    ];
	    let weekText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"