版权声明：本文为博主原创,未经允许不得转载 https://blog.csdn.net/qq_37282601/article/details/85061519
图片在文末
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
#clock{
width: 400px;
height: 400px;
background: url(img/chock.png);
background-size: 100%;
margin: 0 auto;
}
#clock>div{
width: 20px;
height: 400px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
img{
height: 30%;
position: absolute;
left: 0;
right: 0;
margin: 112px auto;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour"><img src="img/hour.png"/></div>
<div id="min"><img src="img/min.png"/></div>
<div id="sec"><img src="img/sec.png"/></div>
</div>
</body>
<script type="text/javascript">
var hh=document.getElementById("hour");
var mm=document.getElementById("min");
var ss=document.getElementById("sec");
setInterval(function()
{
var getdate=new Date();
var hour=getdate.getHours();
var min=getdate.getMinutes();
var sec=getdate.getSeconds();
ss.style.transform="rotate("+sec*6+"deg)";
mm.style.transform="rotate("+min*6+"deg)";
hh.style.transform="rotate("+((hour*30)+(min*0.5))+"deg)";
},500)
</script>
</html>
hour.png
min.png
sec.png
chock.png