js+css 实现钟表的功能

最新推荐文章于 2024-06-25 13:41:59 发布

原创最新推荐文章于 2024-06-25 13:41:59 发布 · 843 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js+css 实现钟表的功能

js 同时被 3 个专栏收录

6 篇文章

订阅专栏

html

2 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文展示了一个使用HTML5和JavaScript实现的时钟页面，包括秒针、分针和时针的动态显示。

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

<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="../../plugin/jquery/jquery-2.1.1.min.js"></script>
<style>
div {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 378px;
	height: 378px;
}
#clock {
	background-image: url('images/clockFace.png');
}
#second {
	width: 378px;
	height: 378px;
}
</style>
<script>
	var second = 0, minute = 0;
	function moveSecond() {
		second++;
		minute = second / 60;
		$("#minute").css("transform", "rotate(" + 6 * minute + "deg)");
		$("#hour").css("transform", "rotate(" + 0.5 * minute + "deg)");
		$("#second").css("transform", "rotate(" + 6 * second + "deg)");
	}
	$(function() {
		var currentDate = new Date();
		second = currentDate.getHours() * 60 * 60 + currentDate.getMinutes()
				* 60 + currentDate.getSeconds();
		setInterval("moveSecond()", 1000);
	});
</script>
</head>

<body>
	<div class="main">
		<div id="clock"></div>
		<div id="hour">
			<img src="images/hourHand.png" />
		</div>
		<div id="minute">
			<img src="images/minuteHand.png" />
		</div>
		<div id="second">
			<img src="images/secondHand.png" />
		</div>
	</div>
</body>
</html>

资源地址http://download.youkuaiyun.com/detail/caofeilong20941/8030597

有问题的可以下评论的啊