做一个简易时钟

最新推荐文章于 2024-05-23 16:14:20 发布

GU-MU-C

最新推荐文章于 2024-05-23 16:14:20 发布

阅读量333

点赞数 11

文章标签： css css3 前端

本文链接：https://blog.csdn.net/g_xlike/article/details/135260241

版权

让我们先看看我们的效果图。以下图片为效果图，他可以实现自己转动，并且是按照时间而指向。
一个简易的时钟，以上都是用代码实现，不需要任何图片

那么，我们就开始来做这个时钟了。
第一步，我们先做时钟所需要的盒子。
boss是包裹的大盒子，也就是最外层的大边框，当然，设置边框我们要用css来实现。
uls是围绕着边框的那些数字的盒子。
h，m，s是时分秒的指针。

<body>
		<div class="boss">
			<ul class="uls"></ul>
			<div class="h"></div>
			<div class="m"></div>
			<div class="s"></div>
		</div>
	</body>

以下呢，为我们的css样式。
第一个*的样式呢，在我的第一篇博客中也有写到过，是清除浏览器默认边框的。关于这个样式的代码，我还是希望大家在写代码的时候都加上，当然，这不是强制性要求啊，只是觉得加上会更好。
时分秒的话，颜色可以换成自己喜欢的，不一定要按照我样式设置。时分秒的粗细也可以自己设置，颜色的话在background-color那里，粗细的话就是width的设置。记住哦，时分秒的话是h，m，s。

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.boss {
				width: 300px;
				height: 300px;
				border: 5px solid #000;
				border-radius: 50%;
				margin: 0 auto;
				transform: translateY(50%);
			}
			ul,li {
				list-style: none;
			}
			.uls {
				width: 280px;
				height: 280px;
				margin: 10px;
				position: relative;
				
			}
			ul li {
				width: 20px;
				height: 280px;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -10px;
				transform-origin: center;
				text-align: center;
			}
			.h {
				width: 10px;
				height: 60px;
				background-color: #000000;
				position: absolute;
				top: 80px;
				left: 50%;
				margin-left: -5px;
				transform-origin: 50% 100%;
			}
			.m {
				width: 6px;
				height: 80px;
				background-color: blue;
				position: absolute;
				top: 60px;
				left: 50%;
				margin-left: -3px;
				transform-origin: 50% 100%;
			}
			.s {
				width: 4px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 40px;
				left: 50%;
				margin-left: -2px;
				transform-origin: 50% 100%;
			}
		</style>

以下是js代码。实现获取时间，以及时分秒三针的转动。

<script type="text/javascript">
		var uls = document.getElementsByClassName("uls")[0];
		for(let i=1;i<=12;i++){
			let lis = document.createElement("li");
			lis.style.transform = `rotate(${i*30}deg)`;
			let spans = document.createElement("span");
			spans.style.display = "inline-block";
			spans.style.transform = `rotate(${i*-30}deg)`;
			spans.innerHTML = i;
			lis.appendChild(spans);
			uls.appendChild(lis);
		}
		var ss = document.getElementsByClassName("s")[0];
		var mm = document.getElementsByClassName("m")[0];
		var hh = document.getElementsByClassName("h")[0];
		setInterval(()=>{
			var time = new Date();
			var h = time.getHours();
			var m = time.getMinutes();
			var s = time.getSeconds();
			ss.style.transform = `rotate(${s*6}deg)`;
			mm.style.transform = `rotate(${m*6+s*6/60}deg)`;
			hh.style.transform = `rotate(${h*30+m*30/60+s*30/60/60}deg)`;
		},1000)
	</script>

以下为完整代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.boss {
				width: 300px;
				height: 300px;
				border: 5px solid #000;
				border-radius: 50%;
				margin: 0 auto;
				transform: translateY(50%);
			}
			ul,li {
				list-style: none;
			}
			.uls {
				width: 280px;
				height: 280px;
				margin: 10px;
				position: relative;
				
			}
			ul li {
				width: 20px;
				height: 280px;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -10px;
				transform-origin: center;
				text-align: center;
			}
			.h {
				width: 10px;
				height: 60px;
				background-color: #000000;
				position: absolute;
				top: 80px;
				left: 50%;
				margin-left: -5px;
				transform-origin: 50% 100%;
			}
			.m {
				width: 6px;
				height: 80px;
				background-color: blue;
				position: absolute;
				top: 60px;
				left: 50%;
				margin-left: -3px;
				transform-origin: 50% 100%;
			}
			.s {
				width: 4px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 40px;
				left: 50%;
				margin-left: -2px;
				transform-origin: 50% 100%;
			}
		</style>
	</head>
	<body>
		<div class="boss">
			<ul class="uls"></ul>
			<div class="h"></div>
			<div class="m"></div>
			<div class="s"></div>
		</div>
	</body>
	<script type="text/javascript">
		var uls = document.getElementsByClassName("uls")[0];
		for(let i=1;i<=12;i++){
			let lis = document.createElement("li");
			lis.style.transform = `rotate(${i*30}deg)`;
			let spans = document.createElement("span");
			spans.style.display = "inline-block";
			spans.style.transform = `rotate(${i*-30}deg)`;
			spans.innerHTML = i;
			lis.appendChild(spans);
			uls.appendChild(lis);
		}
		var ss = document.getElementsByClassName("s")[0];
		var mm = document.getElementsByClassName("m")[0];
		var hh = document.getElementsByClassName("h")[0];
		setInterval(()=>{
			var time = new Date();
			var h = time.getHours();
			var m = time.getMinutes();
			var s = time.getSeconds();
			ss.style.transform = `rotate(${s*6}deg)`;
			mm.style.transform = `rotate(${m*6+s*6/60}deg)`;
			hh.style.transform = `rotate(${h*30+m*30/60+s*30/60/60}deg)`;
		},1000)
	</script>
</html>

GU-MU-C

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
做一个简易时钟

时分秒的话，颜色可以换成自己喜欢的，不一定要按照我样式设置。时分秒的粗细也可以自己设置，颜色的话在background-color那里，粗细的话就是width的设置。记住哦，时分秒的话是h，m，s。第一个*的样式呢，在我的第一篇博客中也有写到过，是清除浏览器默认边框的。关于这个样式的代码，我还是希望大家在写代码的时候都加上，当然，这不是强制性要求啊，只是觉得加上会更好。boss是包裹的大盒子，也就是最外层的大边框，当然，设置边框我们要用css来实现。以下呢，为我们的css样式。h，m，s是时分秒的指针。
复制链接

扫一扫