<!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;
}
.secHead{
width:40px;
height:40px;
background:url("./imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
.minute{
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: red url(./imgs/pointer.png) -53px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
opacity:0.5;
transform:rotate(100deg);
transform-origin:11px 273px;
}
</style>
<script type="text/javascript">
var secDegree = 0;
var minuteDeg = 0;
// 文档准备好以后,咱们就进行秒针的数据初始化
function bodyload(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度,比如15秒,15秒乘以6度=90度,30秒乘以6度=180度。
// 计算当前时间的分针旋转角度
var min = now.getMinutes();
minuteDeg = min * (0.1 * 60);//每秒转0.1度,1分钟等于60秒。比如现在15分钟是90度,15*0.1*60=90度
}
// 每秒钟调用一次
function clockRotate(){
// 秒针的旋转
secDegree += 6;//360度/60秒=6度/秒
var divSecond = document.getElementsByClassName("second");
divSecond[0].style.transform = "rotate(" + secDegree + "deg)";
// 分针的旋转
minuteDeg += 0.1; //360度/3600秒=0.1度/秒
var divMinute = document.getElementsByClassName("minute");
divMinute[0].style.transform = "rotate(" + minuteDeg + "deg)";
}
// 启动定时器,定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body onload="bodyload()">
<div id="clock">
<div class="second">
<div class="secHead"></div>
</div>
<div class="minute"></div>
</div>
</body>
</html>