<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>时钟Click</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
border: 1px solid red;
margin: auto;
background: url("./imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url(./imgs/pointer.png) -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
opacity:0.5;
transform:rotate(45deg);
transform-origin:11px 273px;
}
</style>
<script type="text/javascript">
var secDegree = 0;
// 每秒钟调用一次
function clockRotate(){
secDegree += 6;//360度/60秒=6度/秒
var divSecond = document.getElementsByClassName("second");
divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
}
// 启动定时器，定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body>
<div id="clock">
<div class="second"></div>
</div>
</body>
</html>
