2021-04-26

最新推荐文章于 2024-10-04 06:11:34 发布

南*栀

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量49

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_57606691/article/details/116170752

版权

HTML CSS JavaScript 时钟动态效果

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

制作简易时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.boss{
				width: 500px;
				height: 500px;
				border:1px solid red;
				border-radius: 50%;
				position: relative;
				background: paleturquoise;
			}
			/*list-style和list-style-type的区别*/
			.boss li{
				width: 10px;
				height: 500px;
				list-style: none;
				position: absolute;
				top: 0;
				left:48%;
				text-align: center;
			}
			li:nth-child(2){
				transform: rotate(30deg);
			}
			li:nth-child(3){
				transform: rotate(60deg);
			}
			li:nth-child(4){
				transform: rotate(90deg);
			}
			li:nth-child(5){
				transform: rotate(120deg);
			}
			li:nth-child(6){
				transform: rotate(150deg);
			}
			li:nth-child(7){
				transform: rotate(180deg);
			}
			li:nth-child(8){
				transform: rotate(210deg);
			}
			li:nth-child(9){
				transform: rotate(240deg);
			}
			li:nth-child(10){
				transform: rotate(270deg);
			}
			li:nth-child(11){
				transform: rotate(300deg);
			}
			li:nth-child(12){
				transform: rotate(330deg);
			}
			li:nth-child(2) p{
				transform: rotate(-30deg);
			}
			li:nth-child(3) p{
				transform: rotate(-60deg);
			}
			li:nth-child(4) p{
				transform: rotate(-90deg);
			}
			li:nth-child(5) p{
				transform: rotate(-120deg);
			}
			li:nth-child(6) p{
				transform: rotate(-150deg);
			}
			li:nth-child(7) p{
				transform: rotate(-180deg);
			}
			li:nth-child(8) p{
				transform: rotate(-210deg);
			}
			li:nth-child(9) p{
				transform: rotate(-240deg);
			}
			li:nth-child(10) p{
				transform: rotate(-270deg);
			}
			li:nth-child(11) p{
				transform: rotate(-300deg);
			}
			li:nth-child(12) p{
				transform: rotate(-330deg);
			}
			.s{
				width: 8px;
				height: 110px;
				background: #000000;
				position: absolute;
				top: 27.5%;
				left: 47.8%;
				z-index: 10;
				transform-origin: bottom center; 
			}
			.f{
				width: 6px;
				height: 140px;
				background: yellow;
				position: absolute;
				top: 22%;
				left: 48.2%;
				z-index: 9;
				transform-origin: bottom center; 
			}
			.m{
				width: 4px;
				height: 170px;
				background: blue;
				position: absolute;
				top: 16%;
				left: 48.4%;
				z-index: 8;
				transform-origin: bottom center; 
			}
		</style>
	</head>
	<body>
		<div class="boss">
			<li><p>12</p></li>
			<li><p>1</p></li>
			<li><p>2</p></li>
			<li><p>3</p></li>
			<li><p>4</p></li>
			<li><p>5</p></li>
			<li><p>6</p></li>
			<li><p>7</p></li>
			<li><p>8</p></li>
			<li><p>9</p></li>
			<li><p>10</p></li>
			<li><p>11</p></li>
			<div class="s"></div>
			<div class="f"></div>
			<div class="m"></div>
		
		</div>
	</body>
	<script type="text/javascript">
		var s = document.getElementsByClassName("s")[0];
		var f = document.getElementsByClassName("f")[0];
		var m = document.getElementsByClassName("m")[0];
//		setInterval定时器
		setInterval(function(){
		var time = new Date();
		//获取当前时间
		var ss,ff,mm;
		mm = time.getSeconds();
		ff = time.getMinutes();
		ss = time.getHours()+ff/60;
		s.style.transform = "rotate("+ss*30+"deg)";
		f.style.transform = "rotate("+ff*6+"deg)";
		m.style.transform = "rotate("+mm*6+"deg)";
					
		},1000)
		
	</script>
</html>