当前位置: 萬仟网 > IT编程>网页制作>CSS > h5实现实时时钟

h5实现实时时钟

2019年04月14日 07:26  | 萬仟网IT编程  | 我要评论
<!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>

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com