前端实战案例⑨时钟动画

最新推荐文章于 2024-06-30 14:55:01 发布

耀南.

最新推荐文章于 2024-06-30 14:55:01 发布

阅读量891

点赞数

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 css html

本文链接：https://blog.csdn.net/YN2000609/article/details/133621639

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 8 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟动画</title>
		<style>
			/* 初始化样式 */
			html,body,ul{
				margin: 0;
				padding: 0;
			}
			/*	position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);  
				该样式用于设置水平垂直居中
			*/
			.clock{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 252px;
				height: 252px;
				background-color: #000000;
				border-radius: 50px;
			}
			.dial{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 220px;
				height: 220px;
				border-radius: 50%;
				background-color: #fff;
			}
			.clock .num{
				list-style: none;
				width: 26px;
				position: absolute;
				left: 50%;
				margin-left: -13px;
				font-weight: 800;
				text-align: center;
				transform-origin: 13px 110px;
			}
			/* 这里必须加inline-block或block
			 * 因为transform不适用于inline元素.
			 */
			.num span{
				display: inline-block;
			}
			#point{
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #000000;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			#hour{
				width: 4px;
				height: 70px;
				background: #000000;
				position: absolute;
				top: 40px;
				left: 50%;
				transform: translate(-50%,0) rotate(10deg);
				transform-origin: 2px 70px;
				border-radius: 2px;
			}
			#min{
				width: 4px;
				height: 80px;
				background: #000000;
				position: absolute;
				top: 30px;
				left: 50%;
				transform-origin: 2px 80px;
				border-radius: 2px;
			}
			#sec{
				width: 2px;
				height: 120px;
				background: #FF8900;
				position: absolute;
				top: -10px;
				left: 50%;
				transform-origin: 1px 100px;
				border-radius: 1px;
			}
		</style>
		<script>
			window.onload = function(){
				// 下面两个循环为设置每个数字的旋转角度并将其摆正
				li_list = document.getElementsByClassName('num');
				for(let i=0;i<li_list.length;i++){
					li_list[i].style.transform = "rotate("+(i+1)*30 + "deg"+")";
				}
				span_list = document.getElementsByTagName('span');
				for(let i=0;i<span_list.length;i++){
					span_list[i].style.transform = "rotate(-"+(i+1)*30 + "deg"+")";
				}
				//调用更新指针的函数
				update_pointer();
				
				//获取当前时间并让时钟的指针每隔一段时间旋转对应的角度
				function update_pointer(){
					var date = new Date();
					var hour = date.getHours();
					var min = date.getMinutes();
					// sec为精确到毫秒的秒数,如52.753
					var sec = date.getSeconds() + date.getMilliseconds()/1000;
					var hour_pointer = document.getElementById("hour");
					var min_pointer = document.getElementById("min");
					var sec_pointer = document.getElementById("sec");
					sec_pointer.style.transform = "translate(-50%,20px) rotate("+(sec)*6 + "deg"+")";
					min_pointer.style.transform = "translateX(-50%) rotate("+(min+sec/60)*6 + "deg"+")";
					hour_pointer.style.transform = "translateX(-50%) rotate("+(hour-12)*30 + "deg"+")";
					console.log("当前时间",date);
					// 设置1000/60毫秒后执行操作,此处是一个递归，也可以使用setInterval()
					setTimeout(update_pointer,1000/60);
				}
				
				
 
			}
		</script>
	</head>
	<body>
		<div class="clock">
			<ul class="dial">
				<li class="num"><span>1</span></li>
				<li class="num"><span>2</span></li>
				<li class="num"><span>3</span></li>
				<li class="num"><span>4</span></li>
				<li class="num"><span>5</span></li>
				<li class="num"><span>6</span></li>
				<li class="num"><span>7</span></li>
				<li class="num"><span>8</span></li>
				<li class="num"><span>9</span></li>
				<li class="num"><span>10</span></li>
				<li class="num"><span>11</span></li>
				<li class="num"><span>12</span></li>
				<div id="point"></div>
				<div id="hour"></div>
				<div id="min"></div>
				<div id="sec"></div>
			</ul>
		</div>
	</body>
</html>

更多前端简单小组件尽在主页！喜欢可以收藏哦！