<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock</title>
<style>
#clock { position:relative;width:300px;height:300px; }
#clock img { position:absolute;top:0;left:0; }
#digital { width:300px; height:20px; text-align:center; }
}
</style>
</head>
<body>
<img src="https://i.imgur.com/RarwHBl.png">
<img id="hour" src="https://i.imgur.com/LI384RS.png">
<img id="munite" src="https://i.imgur.com/WBzxVSd.png">
<img id="second" src="https://i.imgur.com/S0TGM6D.png">
</div>
<script>
function digital()
{
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if( h > 12 ) h = h - 12;
var dh = ( h * 30 ) + ( m / 2 );
dh = parseInt( dh );
var dm = m * 6;
var ds = s * 6;
document.getElementById("hour").style.transform = "rotate(" + dh + "deg)";
document.getElementById("munite").style.transform = "rotate(" + dm + "deg)";
document.getElementById("second").style.transform = "rotate(" + ds + "deg)";
document.getElementById("hour").style.MsTransform = "rotate(" + dh + "deg)";
document.getElementById("munite").style.MsTransform = "rotate(" + dm + "deg)";
document.getElementById("second").style.MsTransform = "rotate(" + ds + "deg)";
document.getElementById("hour").style.WebkitTransform = "rotate(" + dh + "deg)";
document.getElementById("munite").style.WebkitTransform = "rotate(" + dm + "deg)";
document.getElementById("second").style.WebkitTransform = "rotate(" + ds + "deg)";
document.getElementById("digital").innerHTML = h + ":" + m + ":" + s;
}
var timer = setInterval( function(){ digital(); }, 1000);
</script>
</body>
</html>
네임리스원
