原生js代码编写钟表

最新推荐文章于 2023-06-19 16:37:44 发布

domunweb

最新推荐文章于 2023-06-19 16:37:44 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签：原生js计时器钟表

本文链接：https://blog.csdn.net/domunweb/article/details/89513103

版权

前端专栏收录该内容

23 篇文章 3 订阅

订阅专栏

原生js代码编写钟表

利用js中的定时器编写；
直接上代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>表</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		div {
			width: 600px;
			height: 600px;
		}

		#clock {
			background: url(images/clock.jpg) no-repeat center center;
			position: absolute;
			z-index: 1;
		}

		#h {
			background: url(images/hour.png) no-repeat center center;
			position: absolute;
			z-index: 2
		}

		#m {
			background: url(images/minute.png) no-repeat center center;
			position: absolute;
			z-index: 3;
		}

		#s {
			background: url(images/second.png) no-repeat center center;
			position: absolute;
			z-index: 4;
		}
	</style>
</head>

<body>
	<div id="clock">
		<div id="h"></div>
		<div id="m"></div>
		<div id="s"></div>

	</div>


	<script type="text/javascript">
		window.onload = function () {
			var oh = document.getElementById("h");
			var om = document.getElementById("m");
			var os = document.getElementById("s");
			function go() {
				var time = new Date();
				var H = time.getHours() + time.getMinutes() / 60;
				var Mi = time.getMinutes();
				var S = time.getSeconds() + time.getMilliseconds() / 1000;

				os.style.transform = 'rotate(' + S * 6 + 'deg)';
				om.style.transform = 'rotate(' + Mi * 6 + 'deg)';
				oh.style.transform = 'rotate(' + H * 30 + 'deg)';
				//document.write("当前时间:"+H+":"+Mi+":"+S);
			}
			go();
			setInterval(go, 1000);

		}
	</script>
</body>

</html>

效果图：
在这里插入图片描述
为了方便测试，我把图中的几个图片也上传，并且去除水印。
表盘背景图：

时针图片：

分针图片：

秒针图片：

谢谢查阅！

domunweb

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
原生js代码编写钟表

原生js代码编写钟表利用js中的定时器编写；直接上代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表</title> <style type="text/css"> * { margin: 0; paddin...
复制链接

扫一扫

专栏目录