js制作会走的时钟

最新推荐文章于 2023-10-31 00:04:31 发布

賣可樂的男孩

最新推荐文章于 2023-10-31 00:04:31 发布

阅读量553

点赞数

分类专栏：前端小案例文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_52147099/article/details/126755327

版权

前端小案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

时钟根据时间走动
效果图：
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				/* background-color: #000000; */
				border-radius: 50%;
				border: 10px solid black;
				box-shadow: 0 0 10px black;
				margin: 20px auto;
			}
			.kd{
				width: 300px;
				height: 300px;
				line-height: 300px;
				border-radius: 50%;
				text-align: center;
				position: relative;
				background-color: lightgray;
			}
			.kd span{
				display: inline-block;
				width: 20px;
				height: 20px;
				font-size: 25px;
				line-height: 20px;
				position: absolute;
				top: 6px;
				left: 140px;
				transform-origin: 10px 140px;
			}
			.kd span i{
				display: inline-block;
				font-style: normal;
			}
			.kd span:nth-child(1){
				transform: rotate(30deg);
			}
			.kd span:nth-child(1)>i{
				transform: rotate(-30deg);
			}
			
			.kd span:nth-child(2){
				transform: rotate(60deg);
			}
			.kd span:nth-child(2)>i{
				transform: rotate(-60deg);
			}
			
			.kd span:nth-child(3){
				transform: rotate(90deg);
			}
			.kd span:nth-child(3)>i{
				transform: rotate(-90deg);
			}
			
			.kd span:nth-child(4){
				transform: rotate(120deg);
			}
			.kd span:nth-child(4)>i{
				transform: rotate(-120deg);
			}
			
			.kd span:nth-child(5){
				transform: rotate(150deg);
			}
			.kd span:nth-child(5)>i{
				transform: rotate(-150deg);
			}
			
			.kd span:nth-child(6){
				transform: rotate(180deg);
			}
			.kd span:nth-child(6)>i{
				transform: rotate(-180deg);
			}
			
			.kd span:nth-child(7){
				transform: rotate(210deg);
			}
			.kd span:nth-child(7)>i{
				transform: rotate(-210deg);
			}
			
			.kd span:nth-child(8){
				transform: rotate(240deg);
			}
			.kd span:nth-child(8)>i{
				transform: rotate(-240deg);
			}
			
			.kd span:nth-child(9){
				transform: rotate(270deg);
			}
			.kd span:nth-child(9)>i{
				transform: rotate(-270deg);
			}
			
			.kd span:nth-child(10){
				transform: rotate(300deg);
			}
			.kd span:nth-child(10)>i{
				transform: rotate(-300deg);
			}
			
			.kd span:nth-child(11){
				transform: rotate(330deg);
			}
			.kd span:nth-child(11)>i{
				transform: rotate(-330deg);
			}
			
			/* 这是我们的简便方法
			   我们可以采用定位位置	
			*/
			#h{
				width: 14px;
				height: 80px;
				background-color: #7b959a;
				position: absolute;
				left: 143px;
				bottom: 150px;
				transform-origin: bottom;
				/* transform: rotate(30deg); */
			}
			#m{
				width: 10px;
				height: 100px;
				background-color: #9a5f3a;
				position: absolute;
				left: 145px;
				bottom: 150px;
				transform-origin: bottom;
				transform: rotate(60deg);
			}
			#sec{
				width: 4px;
				height: 120px;
				background-color: brown;
				position: absolute;
				left: 148px;
				bottom: 150px;
				transform-origin: bottom;
				transform: rotate(30deg);
			}
			#yuan{
				width: 30px;
				height: 30px;
				border-radius:50%;
				background-color: black;
				position: absolute;
				left: 135px;
				bottom: 135px;
			}
			
			/* 方框 */
			.box1{
				width: 300px;
				height: 80px;
				background-color: #637c8a;
				margin: 0px auto;
			}
			.show{
				position: relative;
				top: 8px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<span class="show" id="show" style="font-size: 50px;"></span>
		</div>
		<div class="box">
			<div class="kd">
				<span><i>1</i></span>
				<span><i>2</i></span>
				<span><i>3</i></span>
				<span><i>4</i></span>
				<span><i>5</i></span>
				<span><i>6</i></span>
				<span><i>7</i></span>
				<span><i>8</i></span>
				<span><i>9</i></span>
				<span><i>10</i></span>
				<span><i>11</i></span>
				<span><i>12</i></span>
				
				<div id="h"></div>
				<div id="m"></div>
				<div id="sec"></div>
				<div id="yuan"></div>
			</div>
		</div>
		<script type="text/javascript">
			//获取指针
			var s = document.getElementById("sec");
			var m = document.getElementById("m");
			var h = document.getElementById("h");
			
			function times(){
				//获取时间
				var date = new Date()
				var hours = date.getHours()
				var min = date.getMinutes()
				var sec = date.getSeconds()
				
				// console.log(hours+" "+min+" "+sec)
				//计算每一秒走的度数
				var deg_s = sec*6;
				var deg_m = (min*60+sec)/10;
				var deg_h = (hours*3600+min*60+sec)/(3600*12)*360;
				
				s.style.transform = "rotate("+deg_s+"deg)"
				m.style.transform = "rotate("+deg_m+"deg)"
				h.style.transform = "rotate("+deg_h+"deg)"
			}
			times()
			setInterval(times,1000)
			
			function time(){
				//获取时间
				var date = new Date()
				var hours = date.getHours()
				var min = date.getMinutes()
				var sec = date.getSeconds()
				
				document.getElementById("show").innerHTML = hours+":"+min+":"+sec
			}
			// time()
			setInterval(time,1000)
		</script>
	</body>
</html>