CSS与JS结合制作钟表

最新推荐文章于 2023-03-12 09:54:20 发布

火柴颜

最新推荐文章于 2023-03-12 09:54:20 发布

阅读量291

点赞数

分类专栏：前端文章标签： css js html

本文链接：https://blog.csdn.net/a576435459/article/details/107877157

版权

前端专栏收录该内容

4 篇文章

订阅专栏

CSS结合JS来制作钟表，算是比较好的熟悉CSS 与 JS 结合的艺术表达。

布局上定义一个大个div 里面套一个ul用来制作表盘的60个竖线再套四个div 分别对应时针分针秒针和中间圆点。

CSS样式上主要要灵活运用position的定位和 transform-origin的定位决定针的旋转角度和初始化竖线的角度都是基于表的中点。

JS上主要获得属性并通过循环生产竖线样式。并通过new Date()来获得当前时间，并通过公式计算出旋转角度通过style.transform 来修改针的旋转角度。

<!DOCTYPE html>
<html>
<head>
	<title>时钟</title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	ul{
		list-style: none;
	}
	.box{
		width: 500px;
		height: 500px;
		margin: 30px auto;
		border-radius: 50%;
		border: 2px solid black;
		position: relative;
	}
	.box ul{
		width: 100%;height: 100%;
		position: relative;
	}
	/*竖线的样式 让旋转角度初始到表的中点*/
	.box ul li{
		width: 4px;height: 10px;background-color: black;position: absolute;transform-origin: center 250px; left:50%;
	}
	#hour{
		width: 12px;height: 80px;background: black;position: absolute;top:50%;left: 50%;margin:-80px 0 0 -6px;transform-origin: center bottom;
	}
	#minu{
		width: 8px;height: 140px;background: black;position: absolute;top:50%;left: 50%;margin:-140px 0 0 -4px;transform-origin: center bottom;
	}
	#sceo{
		width: 4px;height: 180px;background: black;position: absolute;top:50%;left: 50%;margin:-180px 0 0 -2px;transform-origin: center bottom;
	}
	#ball{
		background: black;
		width: 30px;height: 30px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -15px;
		border-radius: 50%;
		


	}

</style>
<body>
	<div class="box">
		<ul>
			
		</ul>
		<div id = hour></div>
		<div id = minu></div>
		<div id = sceo></div>
		<div id = ball></div>

	</div>
</body>

<script type="text/javascript">
	var ul = document.querySelector("ul");
	var hour = document.querySelector("#hour");
	var minu = document.querySelector("#minu");
	var sceo = document.querySelector("#sceo");
	for (var i = 0; i < 60; i++) {
		var li = document.createElement("li");
		li.style.transform = 'rotate('+(i*6)+'deg)';
		// 每隔5个生成大的竖线，区分整刻
		if (i%5===0) {
			li.style.height='20px';
		}
		ul.appendChild(li);
	}

	run();
	setInterval(run,1000);
	function run(){
		var date = new Date();
		var h = date.getHours();
		var m = date.getMinutes();
		var s = date.getSeconds();
		console.log(s);
		hour.style.transform = 'rotate('+(h*30+m/2)+'deg)';
		minu.style.transform = 'rotate('+(m*6)+'deg)';
		sceo.style.transform = 'rotate('+(s*6)+'deg)';

	}

</script>
</html>