实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.clock{
width:600px ;
height: 600px;
background: url(images/clock.jpg) no-repeat;
background-size: 100% 100%;
margin: 50px auto;
position: relative;
}
.hour{
width: 100%;
height: 100%;
background: url(images/hour.png) no-repeat center center;
position: absolute;
}
.minute{
width: 100%;
height: 100%;
background: url(images/minute.png) no-repeat center center;
position: absolute;
}
.second{
width: 100%;
height: 100%;
background: url(images/second.png) no-repeat center center;
position: absolute;
}
</style>
</head>
<body>
<div class="clock" id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<script>
show();
function show(){
var clock = document.getElementById('clock');
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
console.log(hour+':'+minute+':'+second);
clock.children[0].style.transform = "rotate("+hour*30+"deg)";
clock.children[1].style.transform = "rotate("+minute*6+"deg)";
clock.children[2].style.transform = "rotate("+second*6+"deg)";
}
setInterval(show,1000);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例