js练习时钟效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul class="clock">
<li class="hours"><img src="images/hourHand.png" alt=""></li>
<li class="minute"><img src="images/minuteHand.png" alt=""></li>
<li class="second"><img src="images/secondHand.png" alt=""></li>
</ul>
<script src="js/index.js"></script>
</body>
</html>
css/index.css
*{
padding: 0;
margin: 0;
list-style: none;
}
body{
/* background: #282828; */
overflow: hidden;
}
.clock{
position: relative;
width: 378px;
height: 378px;
margin: 100px auto;
background: url(../images/clockFace.png) no-repeat;
}
.clock li{
position: absolute;
}
/*
首先考虑 时钟指针 和 分针 秒针 ，匹配：
7day *24 * 60 * 60
秒针：604800*6 = 3628800deg
分针： （604800/60 ）*6 = 60480deg
时针：1个小时 = 30deg 7*24*30 = 5040deg
*/
.clock.init li.hours img{
transform: rotate(5040deg);
}
.clock.init li.minute img{
transform: rotate(60480deg);
}
.clock.init li.second img{
transform: rotate(3628800deg);
}
.clock li.hours img{
transition: transform 604800s linear;
}
.clock li.minute img{
transition: transform 604800s linear;
}
.clock li.second img{
transition: transform 604800s linear;
}
js/index.js
(function () {//代码块
var clock = document.getElementsByClassName('clock')[0];
window.onload = function(){
clock.classList.add('init');//给clock添加类名
getClock();
//定时刷新页面 重新再来7天
setInterval(function(){
window.location.reload();
},200000)
}
function getClock() {
var hoursNode = document.getElementsByClassName('hours')[0],
minuteNode = document.getElementsByClassName('minute')[0],
secondNode = document.getElementsByClassName('second')[0];
var date = new Date();//创建一个date对象
var h = date.getHours();//获得当前的时间的小时24小时制
h = h > 12 ? (h - 12) : h;//变成12小时
var min = date.getMinutes();//获取当前时间的分钟
var sec = date.getSeconds();//获取当前时间的秒数
console.log(h, min, sec)
//把刚才h，min，sec 转化成 deg
//分针对应的走过时间，让时针走多少x？
// 30/360 = x/min*6
// 360*x = min*6*30 x = 时针的偏移量
var x = (min*6*30)/360;
var sec_deg = sec*6;//秒针的度数
var min_deg = min*6;//分针的度数
var h_deg = h*30 + x ;//时针的度数
//对应的角度转化dom
hoursNode.style.transform = 'rotate('+ h_deg +'deg)';
minuteNode.style.transform = 'rotate('+ min_deg +'deg)';
secondNode.style.transform = 'rotate('+ sec_deg +'deg)';
}
})()
