纯js+css制作的时钟

最新推荐文章于 2024-04-07 15:24:43 发布

～晨輝～

最新推荐文章于 2024-04-07 15:24:43 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/weixin_42632751/article/details/86230069

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时钟完整版</title>
	<style>
	*{margin: 0;padding: 0}
	#box{
		width: 400px;
		height: 400px;
		background: #d4d1d1;
		border-radius: 50%;
		border: 1px solid #7c7a7a;
		position: relative;
		margin:50px auto;
	}
	#box>li{
		list-style: none;
		transform-origin:center top;
		width: 3px;
		background : #7c7a7a;
		position :absolute;  
	}
	#box .hourHand{
		width: 4px;
		height: 40px;
		background: green;
		position: absolute;
		left: 50%;
		bottom: 50%;
		transform-origin:center bottom;
	}
	#box .minuteHand{
		width: 4px;
		height: 75px;
		background: black;
		position: absolute;
		left: 50%;
		bottom: 50%;
		transform-origin:center bottom; 
	}
	#box .secondHand{
		width: 4px;
		height: 95px;
		background: red;
		position: absolute;
		left: 50%;
		bottom: 50%;
		transform-origin:center bottom; 
	}
	#box .circle{
		width: 10px;
		height: 10px;
		background: black;
		border-radius: 5px;
		position: absolute;
		left: 49%;
		top: 49%; 
	}
	#box .b1{
		position: absolute;
		left: 41%;
		bottom:20%; 
	}
	</style>
</head>
<body>
	<div id="box">
		<div class="hourHand"></div>
		<div class="minuteHand"></div>
		<div class="secondHand"></div>
		<div class="circle"></div>
		<b class="b1"></b>
	</div>
</body>
<script>

var oBox = document.getElementById("box");
var oHourHand = document.getElementsByClassName("hourHand");
var oMinuteHand = document.getElementsByClassName("minuteHand");
var oSecondHand = document.getElementsByClassName("secondHand");
var oB = document.getElementsByClassName("b1");

//degL表示时钟的长格旋转度数
var degL = 0;
//degS表示时钟的短格旋转度数
var degS = 0;
//时钟的半径
var r = 200;
//记录时钟的圆心位置
var X = 200;
var Y = 200;

//创建时钟上的刻度
for(var i = 0;i < 12;i++){
	var oLi = document.createElement("li");
	var oSpan = document.createElement("span");
	var rotate = degL * (Math.PI / 180);
	var X1 = Math.sin(rotate) * r;
	var Y1 = Math.cos(rotate) * r;

	oLi.style.height = "15px";
	oLi.style.left = X + X1 + "px";
	oLi.style.top = Y - Y1 + "px";

	if (i == 0) {
		oSpan.innerHTML = 12;
	}else{
		oSpan.innerHTML = i;
	}
	
	oSpan.style.position = "absolute";
	oSpan.style.left = "-3px";
	oSpan.style.top = "17px";
	oSpan.style.transform = `rotate(${-degL}deg)`;

	oLi.style.transform = `rotate(${degL}deg)`;
	oBox.appendChild(oLi);
	oLi.appendChild(oSpan);
	for(var k = 0;k < 4;k++){
		if (degS != degL) {
			var oLi = document.createElement("li");
			var rotate = degS * (Math.PI / 180);
			var X2 = Math.sin(rotate) * r;
			var Y2 = Math.cos(rotate) * r;
			oLi.style.height = "10px";
			oLi.style.left = X + X2 + "px";
			oLi.style.top = Y - Y2 + "px";
			oLi.style.transform = `rotate(${degS}deg)`;
			oBox.appendChild(oLi);	
		}else{
			--k;	
		}
		degS+=6;
	}
	degL+=30;	
}


//获取当前时间的年,月,日,时,分,秒
function getTime(){
	var d = new Date();
	var year = d.getFullYear();
 	var month = d.getMonth();
	var day = d.getDate();

	var hour = d.getHours();
	var week = d.getDay();
	var minute = d.getMinutes(); 
	var second = d.getSeconds();
	oSecondHand[0].style.transform = `rotate(${second*6}deg)`;
	oMinuteHand[0].style.transform = `rotate(${minute*6}deg)`;
	oHourHand[0].style.transform = `rotate(${hour*30 + minute / 2}deg)`;
	oB[0].innerHTML = year+"-"+(month+1)+"-"+day;
}

	setInterval(function(){
		getTime();
	},1000)
</script>
</html>

手工制作gif图，仅供参考,具体可看代码 — 手工制作的gif图，仅供参考，具体看代码

～晨輝～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js+css制作的时钟

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;时钟完整版&lt;/title&gt; &lt;style&gt; *{margin: 0;padding: 0} #box{ width: 4
复制链接

扫一扫