javascript 简易时钟

最新推荐文章于 2023-08-19 10:13:34 发布

qq_39985511

最新推荐文章于 2023-08-19 10:13:34 发布

阅读量444

点赞数 2

分类专栏： JavaScript 文章标签： javascript css 时钟钟表

本文链接：https://blog.csdn.net/qq_39985511/article/details/78066821

版权

JavaScript 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

通过css的旋转和Date方法获取时间

背景图片如下：

时针分针秒针

<!DOCTYPE HTML>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #clock {
            width: 600px;
            height: 600px;
            margin:50px auto;
            background: url(images/clock1_03.jpg) no-repeat;
            position: relative;
        }
        #clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            
        }
        #hour {
            background: url(images/hour.png) no-repeat center center;
        }
        #minute {
            background: url(images/minute.png) no-repeat center center;
        }
        #second {
            background: url(images/second.png) no-repeat center center;
        }

    </style>
</head>
<body>
<div id="clock">
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
</div>
	<script type="text/javascript">
		var hour = document.getElementById("hour");
		var second = document.getElementById("second");
		var minute = document.getElementById("minute");
		var ms = 0,s = 0,m = 0,h = 0;
		setInterval(function(){
			var date = new Date();
			ms = date.getMilliseconds();
			s = date.getSeconds() + ms / 1000;
			m = date.getMinutes() + s / 60;
			h = date.getHours() % 12 + m / 60;
			
			second.style.transform = "rotate(" + 6 * s + "deg)";
			minute.style.transform = "rotate(" + 6 * m + "deg)";
			hour.style.transform = "rotate(" + 30 * h + "deg)";
			
			
		},100)
	</script>
</body>
</html>

qq_39985511

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 简易时钟

通过css的旋转和Date方法获取时间背景图片如下：时针分针秒针 #clock { width: 600px; height: 600px; margin:50px auto; background: url(images/clock1_03.j
复制链接

扫一扫