<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 时钟 </title>
<style>
.clock {
width: 600px;
height: 600px;
margin: 100px auto;
background: url(images/clock.jpg) no-repeat;
position: relative;
}
.clock div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/hour.png) no-repeat center;
}
#m {
background-image: url(images/minute.png);
}
#s {
background-image: url(images/second.png);
}
</style>
</head>
<body>
<div class="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
<!--
1.先要拿到当前时间（date对象）
主要是为了拿时分秒
2.把时、分、秒三个div旋转到对应的位置区
-->
<script>
/*
一个圆360度，一个圆上12个小时。每个小时 360/12 = 30度
所以你要算几小时旋转多少度，就用几 * 30得到度数
一个圆360度，一个圆上60分钟。每分钟 360 / 60 = 6度
所以你要算n分旋转度数，就用 n * 6 得到度数
一个圆360度，一个圆上60秒。每秒钟 360 / 60 = 6度
所以你要算n秒旋转度数，就用 n * 6 得到度数
*/
// 找到元素
var h = document.getElementById('h');
var m = document.getElementById('m');
var s = document.getElementById('s');
setNow();
setInterval(setNow,1000);
function setNow() {
// 拿到当前时间
var now = new Date();
// 找到时分秒
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
// 秒走了多少，应该把秒转成分，再加一下这个度数
// 例：5分30秒，其实严格来讲叫5.5分钟，所以应该是5*6 + 0.5*6得到度数
var hDeg = hour * 30 + min / 60 * 30;
var mDeg = min * 6 + sec / 60 * 6;
var sDeg = sec * 6;
//让div去旋转
h.style.transform = "rotate(" + hDeg + "deg)";
m.style.transform = "rotate(" + mDeg + "deg)";
s.style.transform = "rotate(" + sDeg + "deg)";
}
</script>
</body>
</html>
网友评论