js 时钟小案例

最新推荐文章于 2022-07-30 11:47:24 发布

qq_37137999

最新推荐文章于 2022-07-30 11:47:24 发布

阅读量697

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_37137999/article/details/80650587

JS 专栏收录该内容

12 篇文章

订阅专栏

本文将介绍如何使用JavaScript创建一个实时更新的时钟小案例，通过DOM操作展示时间变化，掌握JavaScript时间处理和DOM交互的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时钟</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 600px;
				height: 600px;
				margin: 300px auto;
				background: url(img/clock.jpg) no-repeat;
				position: relative;
			}
			.box .h,.m,.s{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
			}
			.box .h{
				background: url(img/hour.png) no-repeat center center;
			}
			.box .m{
				background: url(img/minute.png) no-repeat center center;
			}
			.box .s{
				background: url(img/second.png) no-repeat center center;
			}
		</style>
	</head>
	<body>
		<div id="box" class="box">
			<div class="h" id="hour"></div>
			<div class="m" id="minutes"></div>
			<div class="s" id="seconds"></div>
		</div>
	</body>
	<script type="text/javascript">
		var h = 0,m = 0,s = 0, ms = 0;
		setInterval(function(){
			var hour = document.getElementById("hour");
			var minutes = document.getElementById("minutes");
			var seconds = document.getElementById("seconds");
			
			var date = new Date();              // 得到的是最新时间
			ms = date.getMilliseconds();        // 得到毫秒数   
			s = date.getSeconds() + ms / 1000;  // 得到秒
			m = date.getMinutes() + s / 60;     // 得到分
			h = date.getHours() % 12 + m / 60;  // 得到 小时 
			
			//console.log(h);
			
			// 旋转角度    一圈360度    每秒旋转6 度     每分钟旋转 6 度     每小时 旋转30 度
			seconds.style.WebkitTransform = "rotate("+s*6+"deg)";
			minutes.style.WebkitTransform = "rotate("+m*6+"deg)";
			hour.style.WebkitTransform = "rotate("+h*30+"deg)";
			
			seconds.style.MozTransform = "rotate("+s*6+"deg)";
			minutes.style.MozTransform = "rotate("+m*6+"deg)";
			hour.style.MozTransform = "rotate("+h*30+"deg)";
			
		},1000);
	</script>
</html>

效果：