h5实现实时时钟

最新推荐文章于 2023-07-26 16:00:48 发布

z-pan

最新推荐文章于 2023-07-26 16:00:48 发布

阅读量980

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xutao1517588477/p/10700997.html

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8"/>
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.clock{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				border-radius: 50%;
				position: relative;
				margin: 20px;
				background-size: 100%;
			}
			.clock .hour{
				width: 10px;
				height: 70px;
				background: orange;
				position: absolute;
				left: 95px;
				top: 30px;
				/*animation: sec 86400s infinite;*/
			}
			.clock .minute{
				width: 6px;
				height: 80px;
				background: deepskyblue;
				position: absolute;
				left: 97px;
				top: 20px;
				/*animation: sec 3600s infinite;*/
			}
			.clock .second{
				width: 2px;
				height: 90px;
				background: red;
				position: absolute;
				left: 99px;
				top: 10px;
				/*animation: sec 60s infinite;*/
			}
			@keyframes sec{
				0%{transform-origin: center bottom;transform: rotate(0deg);}
				100%{transform-origin: center bottom;transform: rotate(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <!--这里调用jquery是为了选取元素方便而已，初学建议用dom选取元素-->
	<script>
		function fn(){
		var myDate=new Date;
		var h=myDate.getHours();
		var m=myDate.getMinutes();
		var s=myDate.getSeconds();
		$(".clock .hour").css({"transform-origin":" center bottom","transform":"rotate("+30*h+"deg)"});
		$(".clock .minute").css({"transform-origin":" center bottom","transform":"rotate("+6*m+"deg)"});
		$(".clock .second").css({"transform-origin":" center bottom","transform":"rotate("+6*s+"deg)"});
		}
		fn();
		setInterval(fn,1000);
	</script>
</html>

转载于:https://www.cnblogs.com/xutao1517588477/p/10700997.html