아날로그 시계 만들기 최종

<!DOCTYPE HTML>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>시계2</title>
	<style type="text/css">
		#clock {
			width:300px;
			height:300px;
			background-image:url(http://webskills.kr/images/etc/clock.png);
			position:relative;
		}
		#clock img {position:absolute;top:0;left:0;}
		/*
		#hour { transform:rotate(90deg); }
		#minute { transform:rotate(180deg); }
		#second { transform:rotate(270deg); }
		*/
	</style>
</head>
<body>
	<div id="clock">
		<img id="hour" src="http://webskills.kr/images/etc/h.png" width="300" height="300">
		<img id="minute" src="http://webskills.kr/images/etc/m.png" width="300" height="300">
		<img id="second" src="http://webskills.kr/images/etc/s.png" width="300" height="300">
	</div>
	<div id="digital"></div>
	<script type="text/javascript">
		var hour = document.getElementById("hour");
		var minute = document.getElementById("minute");
		var second = document.getElementById("second");
		var timer = setInterval(function(){ getTime(); },1000);
		function getTime(){
			var time = new Date();
			var yy = time.getFullYear();
			var mm = time.getMonth();
			var dd = time.getDate();
			var h = time.getHours();
			var m = time.getMinutes();
			var s = time.getSeconds();
			var yymmdd = yy + "년 " + mm + "월 " + dd + "일";
			var hms = h + ":" + m + ":" + s;
			document.getElementById("digital").innerHTML = yymmdd + " " + hms;
			if(h>12) h = h - 12;
			var hd = (h * 30) + (m / 2) ;
			var md = m * 6;
			var sd = s * 6;
			hour.style.transform = "rotate(" + hd + "deg)";
			minute.style.transform = "rotate(" + md + "deg)";
			second.style.transform = "rotate(" + sd + "deg)";
		}
		getTime();
	</script>
</body>
</html>