html手表动态样式，js、css样式导入

最新推荐文章于 2024-06-08 13:31:15 发布

m0_58233168

最新推荐文章于 2024-06-08 13:31:15 发布

阅读量174

点赞数

分类专栏： html 动态样式 js 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_58233168/article/details/127989710

版权

html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

动态样式

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

在外部的JS文件中完成以下效果：

页面弹窗显示1-12 1-12 1-12 1-12...(模拟手表的指针数值变化)

1、html框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<script type=" text/javascript"  src="1.js">     //src:引入js文件的路径
		</script>
		<link rel = "stylesheet" type="text/css" href="new_file.css" />
	</head>
	<body>
		<div id="clock">
		<div class="scale"><span>12</span></div>
		<div class="scale"><span>1</span></div>
		<div class="scale"><span>2</span></div>
		<div class="scale"><span>3</span></div>
		<div class="scale"><span>4</span></div>
		<div class="scale"><span>5</span></div>
		<div class="scale"><span>6</span></div>
		<div class="scale"><span>7</span></div>
		<div class="scale"><span>8</span></div>
		<div class="scale"><span>9</span></div>
		<div class="scale"><span>10</span></div>
		<div class="scale"><span>11</span></div>
		<!-- 表盘刻度 -->
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key long"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<div class="key"></div>
		<!-- 表的指针 -->
		<div id="hour"></div>
		<div id="minute"></div>
		<div id="second"></div>
		<!-- 表中心得原点 -->
		<div id="spike"></div>
		</div>
		
	</body>
	<script>
		var scales = document.querySelectorAll(".scale");
		var sps = document.querySelectorAll(".scale span");
		var keys = document.querySelectorAll(".key");
		//初始化表盘
		for(var i = 0 ; i < scales.length ; i++){
		// 12个刻度共360deg，那么每个客服需要旋转30deg
		scales[i].style.transform = "rotate("+i*30+"deg)";
		// 父级元素发生旋转，自己元素也会随之发生旋转，所以刻度显示数字会发生角度秦谢，需要将每一个div中的span逆时针旋转相同的角度吧数值摆正
		sps[i].style.transform = "rotate("+(-i*30)+"deg)";
		}
		for(var i = 0 ; i < keys.length ; i ++){
		keys[i].style.transform = "rotate("+i*6+"deg)";
		console.log(keys[i]);
		}
		// 获取当前时间并将时间转化为对应的角度
		function initTime(){
		var date = new Date();
		console.log(date);


		var sNum = date.getSeconds();
		sDeg = sNum*6;
		second.style.transform = "rotate("+sDeg+"deg)";

		// 将分钟转化为角度，1m = 6deg

		var mNum = date.getMinutes();
		mDeg = mNum*6 + sNum*6/60;
		minute.style.transform = "rotate("+mDeg+"deg)";


		// 将小时转化为角度
		// 1h对应的角度是360/12=30deg
		var hNum = date.getHours();
		console.log(hNum);
		hNum = hNum >12 ? hNum - 12 : hNum;
		hDeg =hNum*30 + mNum*30/60;
		console.log(hDeg);
		// 将对应角度显示在表盘上
		hour.style.transform  = "rotate("+hDeg+"deg)";
		}
		setInterval(initTime,1000); 
</script>
</html>

2、js文件命名：1.js

function showTime(){
var time = new Date();
alert(time);
}

3、css样式：命名： new_file.css

#clock{
		width: 500px;
		height: 500px;
		border: 5px solid gray;
		margin: 0 auto;
		position: relative;
		background: black;
		border-radius: 50%;
		box-shadow: 0 0 15px black;
		}
		.scale{
		width: 30px;
		height: 30px;
		position: absolute;
		left: calc(50% - 15px);
		top: 30px;
		color: white;
		transform-origin: 15px 220px;

		}
		.scale span{
		display: block;
		text-shadow: 0 5px 20px lightgray;
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 30px;
		font-size: 20px;
		/*background: red;*/

		}
		#hour{
		width: 8px;
		height: 100px;
		position: absolute;
		background: white;
		left: calc(50% - 4px);
		top: 150px; /*将所有表针底部定位在表盘中心*/
		transform-origin: center bottom;
		border-radius: 40% 40% 0% 0%;
		}
		#minute{
		width: 6px;
		height: 180px;
		position: absolute;
		background: white;
		left: calc(50% - 3px);
		top: 70px;
		transform-origin: center bottom;
		border-radius: 40% 40% 0% 0%;
		}
		#second{
		width: 4px;
		height: 200px;
		position: absolute;
		background: white;
		left: calc(50% - 2px);
		top: 50px;
		transform-origin: center bottom;
		border-radius: 40% 40% 0% 0%;
		}
		#spike{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: lightgray;
		position: absolute;
		left: calc(50% - 10px);
		top: calc(50% - 10px);
		}
		.key{
		width: 2px;
		height: 15px;
		border:1px solid white;
		position: absolute;
		top: 0;
		left: calc(50% - 1px);
		background: white;
		transform-origin: 2px 249px;
		}
		.long{
		width: 3px;
		height: 25px;
		}

4、效果：