CSS3 实现时钟效果

最新推荐文章于 2022-11-21 15:46:40 发布

Cokeny.

最新推荐文章于 2022-11-21 15:46:40 发布

阅读量656

点赞数

分类专栏：前端文章标签： css3

前端专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				list-style: none;
			}
			
			#wrap{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius:50% ;
			}
			
			ul > li{
				position: absolute;
				left: 99px;
				top: 0;
				width: 2px;
				height: 10px;
				background: black;
				transform-origin:center 100px;
			}
			ul > li:nth-child(5n+1){
				height: 15px;
			}
			
			#wrap > .hour{
				position: absolute;
				left: 97px;
				top: 70px;
				width: 6px;
				height: 30px;
				background: black;
				transform-origin: center bottom;
			}
			#wrap > .min{
				position: absolute;
				left: 98px;
				top: 50px;
				width: 4px;
				height: 50px;
				background: gray;
				transform-origin: center bottom;
			}
			#wrap > .sec{
				position: absolute;
				left: 99px;
				top: 30px;
				width: 2px;
				height: 70px;
				background: red;
				transform-origin: center bottom;
			}
			#wrap > .icon{
				position: absolute;
				left: 90px;
				top: 90px;
				width: 20px;
				height: 20px;
				border-radius:50% ;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul>
				
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>
		</div>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var hourNode = document.querySelector("#wrap > .hour");
			var minNode = document.querySelector("#wrap > .min");
			var secNode = document.querySelector("#wrap > .sec");
			var ulNode = document.querySelector("#wrap > ul");
			var styleNode = document.createElement("style");
			var liHtml = "";
			var cssText="";
			for(var i=0;i<60;i++){
				liHtml+="<li></li>";
				cssText+="ul > li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}";
			}
			ulNode.innerHTML = liHtml;
			styleNode.innerHTML =cssText;
			document.head.appendChild(styleNode);
			
			move();
			setInterval(move,1000)
			function move(){
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes()+s/60;
				var h = date.getHours()+m/60;
				
				hourNode.style.transform="rotate("+(30*h)+"deg)";
				minNode.style.transform="rotate("+(6*m)+"deg)";
				secNode.style.transform="rotate("+(6*s)+"deg)";
			}
			
		}
		
		
	</script>
</html>