js练习时钟效果

标签：char   position   line   linear   nod   偏移量   utf-8   fun   指针   

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)‘;

}

})()

js练习时钟效果

标签：char   position   line   linear   nod   偏移量   utf-8   fun   指针   

原文地址：https://www.cnblogs.com/weixin2623670713/p/12964419.html