css3+js实现时钟

程序员文章站 2022-03-09 09:04:48

...

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
  	<title></title>
  </head>
  <style type="text/css">
  	* {
  		margin: 0;
  		padding: 0;
  	}

  	.box {
  		margin: 100px auto;
  		width: 445px;
  		height: 445px;
  		border-radius: 50%;
  		background: url(img/clock.png) no-repeat;
  		position: relative;
  	}

  	.box>div {
  		position: absolute;
  	}

  	.hour {
  		width: 24px;
  		height: 108px;
  		background: url(img/h.png) no-repeat center center;
  		/*设置旋转中心 */
  		transform-origin: 12px 97px;
  		top: 129px;
  		left: 208px;

  	}

  	.m {
  		width: 24px;
  		height: 142px;
  		background: url(img/m.png) no-repeat center center;
  		/*设置旋转中心 */
  		transform-origin: 12px 131px;
  		top: 96px;
  		left: 208px;
  	}

  	.s {
  		width: 14px;
  		height: 160px;
  		background: url(img/s.png) no-repeat center center;
  		/*设置旋转中心 */
  		transform-origin: 8px 146px;
  		top: 80px;
  		left: 213px;
  	}
  </style>
  <body>
  	<div class="box">
  		<div class="hour"></div>
  		<div class="m"></div>
  		<div class="s"></div>
  	</div>
  	<script type="text/javascript">
  		function fun() {	
  			var date = new Date();
  			
  			// 设置秒针的运动
  			document.querySelector('.s').style.transform = 'rotate(' + date.getSeconds() * 6 + 'deg )';
  			
  			
  			// 设置分针的运动
  			 // date.getSeconds() / 60 * 6  与秒针联动
  			var min = date.getMinutes() * 6 + date.getSeconds() / 60 * 6;
  			document.querySelector('.m').style.transform = 'rotate(' + min + 'deg ) ';
  			
  			
  			// 设置时针的运动
  			//date.getMinutes() / 60 * 30  与分针联动
  			var hour = (date.getHours() % 12) * 30 + date.getMinutes() / 60 * 30;
  			document.querySelector('.hour').style.transform = 'rotate(' + hour + 'deg ) ';
  		}
  		
  		//设置定时器
  		setInterval(fun, 1000)
  	</script>
  </body>
</html>