css3+js实现时钟特效

最新推荐文章于 2023-11-04 00:00:29 发布

清砾

最新推荐文章于 2023-11-04 00:00:29 发布

阅读量471

点赞数 2

分类专栏：技术小妙招文章标签： css3 js

本文链接：https://blog.youkuaiyun.com/m0_46690660/article/details/108541866

版权

技术小妙招专栏收录该内容

20 篇文章

订阅专栏

1.实现了时钟的特效，可以转动，时间准确，画面美观大气；
2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等
效果如图：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>CSS3时钟特效</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/an.ico"/>
		<style>
			/*表盘边框*/
			
			.clock {
				/* 设置大小 */
				width: 400px;
				height: 400px;
				position: relative;
				margin: 40px auto;
				/*上边距*/
				border-radius: 50%;
				/*圆形*/
				box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
				/*表盘阴影*/
				background: #F5DEB3;
				border: 10px solid #FFFF00;
			}
			/*画刻度的面板*/
			
			.box {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			/*用来装刻度和数字的div*/
			
			.box div {
				width: 0px;
				height: 200px;
				position: absolute;
				left: 200px;
				/*旋转*/
				transform: rotate(0deg);
				/*设置基点为右下角*/
				transform-origin: bottom right;
				background: rgba(255, 0, 0, 0.5);
			}
			/*数字*/
			
			.box div i {
				float: left;
				margin-top: 20px;
				margin-left: -10px;
				font-style: normal;
				width: 20px;
				text-align: center;
				font-style: 18px;
			}
			/*小刻度*/
			
			.box div::after {
				content: "";
				position: absolute;
				background: #484848;
				width: 2px;
				height: 10px;
				left: -1px;
			}
			/*大刻度*/
			
			.box div.five::after {
				position: absolute;
				content: "";
				width: 4px;
				height: 20px;
				left: -2px;
				top: 0;
				background:	#484848;
				border-radius: 0 0 2px 2px;
			}
			/*秒针样式*/
			
			.second {
				width: 1px;
				height: 200px;
				background: red;
				position: absolute;
				left: 200px;
				/*距离表盘宽度一半*/
				margin-top: 30px;
				z-index: 10;
				transform: rotate(0deg);
				transform-origin: center 170px;
				/*定位旋转位置*/
			}
			/*圆心样式*/
			
			.second::after {
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				background: red;
				border-radius: 50%;
				bottom: 20px;
				left: -10px;
			}
			/*分针样式*/
			.minute {
				width: 2px;
				height: 140px;
				background: #8b8b8d;
				position: absolute;
				left: 199px;
				margin-top: 60px;
				z-index: 9;
				transform-origin: center bottom;
				transform: rotate(12deg);
				animation: minute 60s linear infinite;
			}
			/*时针样式*/
			
			.hour {
				width: 6px;
				height: 100px;
				background: #333;
				position: absolute;
				left: 197px;
				margin-top: 100px;
				z-index: 8;
				border-radius: 3px;
				transform: rotate(2deg);
				transform-origin: center bottom;
				animation: minute 60s linear infinite;
			}
		</style>
	</head>

	<body>
		<div class="clock">
			<div class="box"></div>
			<div class="second"></div>
			<div class="minute"></div>
			<div class="hour"></div>
		</div>

		<script>
			var box = document.getElementsByClassName("box")[0];
			var ssObj = document.getElementsByClassName("second")[0];
			var mmObj = document.getElementsByClassName("minute")[0];
			var hhObj = document.getElementsByClassName("hour")[0];
			/*获取当前时间*/
			var date = new Date();
			var hh = date.getHours();
			var mm = date.getMinutes();
			var ss = date.getSeconds();
			/*计算页面指针加载时的角度*/
			hhDeg = 360 * (hh % 12) / 12;
			mmDeg = 360 * mm / 60;
			ssDeg = 360 * ss / 60;
			hhObj.style.transform = "rotate(" + hhDeg + "deg)";
			mmObj.style.transform = "rotate(" + mmDeg + "deg)";
			ssObj.style.transform = "rotate(" + ssDeg + "deg)";
            // 定义初始刻度的度数
			var Deg = 0;
			/*画刻度*/
			for (var i = 0; i < 60; i++) {
				var div1 = document.createElement("div"); //创建一个div
				var hourNum = i / 5;
				//当为5时
				if (hourNum == 0) hourNum = 12;
				if (i % 5 == 0) { //大刻度
					div1.className = "five";
					div1.innerHTML = "<i>" + hourNum + "</i>"
				}
				div1.style.transform = "rotate(" + Deg + "deg)";
				box.appendChild(div1);
				Deg += 6;// 每两个刻度之间是6度
			}
			/*指针转动的函数*/
			function drawSS() {
				// 秒针的度数
				ssDeg = 360 * ss / 60;
				// 分针的度数
				mmDeg1 = 360 * mm / 60;
				// 时针的度数
				hhDeg1 = 360 * (hh % 12) / 12;
				// 分针每秒走的位置
				mmDeg = mmDeg1 + (6 * ss / 60);
				// 时针每分钟走的位置
				hhDeg = hhDeg1 + (30 * mm / 60);
				
				hhObj.style.transform = "rotate(" + hhDeg + "deg)";
				mmObj.style.transform = "rotate(" + mmDeg + "deg)";
				ssObj.style.transform = "rotate(" + ssDeg + "deg)";
				ss += 1;
				if (ss > 60) {
					ss = 1;
					mm += 1;
				}
				if (mm == 60) {
					mm = 0;
					hh += 1;
				}
				setTimeout(function() {
					drawSS();
				}, 1000);
			}
			drawSS();
		</script>
	</body>

</html>

精简版：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>CSS3时钟特效</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/an.ico"/>
		<style>
			/*表盘边框*/
			
			.clock {
				/* 设置大小 */
				width: 400px;
				height: 400px;
				position: relative;
				margin: 40px auto;
				/*上边距*/
				border-radius: 50%;
				/*圆形*/
				box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
				/*表盘阴影*/
				background: #F5DEB3;
				border: 10px solid #FFFF00;
			}
			/*画刻度的面板*/
			
			.box {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			/*用来装刻度的div*/
			
			.box div {
				width: 0px;
				height: 200px;
				position: absolute;
				left: 200px;
				/*旋转*/
				transform: rotate(0deg);
				/*设置基点为右下角*/
				transform-origin: bottom right;
				background: rgba(255, 0, 0, 0.5);
			}
			/*小刻度*/
			
			.box div:after {
				content: "";
				position: absolute;
				background: #484848;
				width: 2px;
				height: 10px;
				left: -1px;
			}
			/*大刻度*/
			
			.box div.five:after {
				position: absolute;
				content: "";
				width: 4px;
				height: 20px;
				left: -2px;
				top: 0;
				background:	#484848;
				border-radius: 0 0 2px 2px;
			}
			/*秒针样式*/
			
			.second {
				width: 1px;
				height: 200px;
				background: red;
				position: absolute;
				left: 200px;
				/*距离表盘宽度一半*/
				margin-top: 30px;
				z-index: 10;
				transform: rotate(0deg);
				transform-origin: center 170px;
				/*定位旋转位置*/
			}
			/*圆心样式*/
			
			.second:after {
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				background: red;
				border-radius: 50%;
				bottom: 20px;
				left: -10px;
			}
			/*分针样式*/
			.minute {
				width: 2px;
				height: 140px;
				background: #8b8b8d;
				position: absolute;
				left: 199px;
				margin-top: 60px;
				z-index: 9;
				transform-origin: center bottom;
				transform: rotate(12deg);
			}
			/*时针样式*/
			
			.hour {
				width: 6px;
				height: 100px;
				background: #333;
				position: absolute;
				left: 197px;
				margin-top: 100px;
				z-index: 8;
				border-radius: 3px;
				transform: rotate(2deg);
				transform-origin: center bottom;
			}
		</style>
	</head>

	<body>
		<div class="clock">
			<div class="box"></div>
			<div class="second"></div>
			<div class="minute"></div>
			<div class="hour"></div>
		</div>

		<script>
			var box = document.getElementsByClassName("box")[0];
			var ssObj = document.getElementsByClassName("second")[0];
			var mmObj = document.getElementsByClassName("minute")[0];
			var hhObj = document.getElementsByClassName("hour")[0];
			/*获取当前时间*/
			var date = new Date();
			var hh = date.getHours();
			var mm = date.getMinutes();
			var ss = date.getSeconds();
			/*计算页面指针加载时的角度*/
			drawSS();
            // 定义初始刻度的度数
			var Deg = 0;
			/*画刻度*/
			for (var i = 0; i < 60; i++) {
				var div1 = document.createElement("div"); //创建一个div
				//当为5时
				if (i % 5 == 0) { //大刻度
					div1.className = "five";
				}
				div1.style.transform = "rotate(" + Deg + "deg)";
				box.appendChild(div1);
				Deg += 6;// 每两个刻度之间是6度
			}
			/*指针转动的函数*/
			function drawSS() {
				// 秒针的度数
				ssDeg = 360 * ss / 60;
				// 分针的度数
				mmDeg = 360 * mm / 60 + (6 * ss / 60);
				// 时针的度数
				hhDeg = 360 * (hh % 12) / 12 + (30 * mm / 60);
				// 旋转
				hhObj.style.transform = "rotate(" + hhDeg + "deg)";
				mmObj.style.transform = "rotate(" + mmDeg + "deg)";
				ssObj.style.transform = "rotate(" + ssDeg + "deg)";
				ss += 1;
				// 每秒钟调用一次
				setTimeout(function() {
					drawSS();
				}, 1000);
			}
			
		</script>
	</body>

</html>