实现一个简单的圆盘时钟
预览图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c69a2adc5d7b50cc389d68699f06fc54.gif)
代码:
css:
<style>
.disc {
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 50%;
}
.axis {
position: absolute;
top: 150px;
left: 150px;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.hourHand {
position: absolute;
top: 150px;
left: 147px;
width: 6px;
height: 80px;
background-color: #000;
transform-origin: 3px 0;
}
.minuteHand {
position: absolute;
top: 150px;
left: 148px;
width: 4px;
height: 110px;
background-color: #000;
transform-origin: 2px 0;
}
.secondHand {
position: absolute;
top: 150px;
left: 149px;
width: 2px;
height: 130px;
background-color: #000;
transform-origin: 1px 0;
}
.scale {
position: absolute;
top: 0;
left: 150px;
transform-origin: 2.5px 150px;
width: 2px;
height: 5px;
background-color: #000;
}
.num {
position: absolute;
top: 15px;
left: 150px;
width: 20px;
height: 20px;
color: 16px;
text-align: center;
line-height: 20px;
transform-origin: 50% 135px;
}
.num span {
display: block;
transform-origin: 50% 50%;
}
</style>
html:
<div class="disc">
<div class="axis"></div>
<div class="hourHand"></div>
<div class="minuteHand"></div>
<div class="secondHand"></div>
</div>
js:
var disc = document.getElementsByClassName('disc')[0];
var hourHand = document.getElementsByClassName('hourHand')[0];
var minuteHand = document.getElementsByClassName('minuteHand')[0];
var secondHand = document.getElementsByClassName('secondHand')[0];
var scale = document.getElementsByClassName('scale');
for (var i = 0; i < 60; i++) {
var scale = document.createElement('div');
scale.classList.add('scale');
scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
disc.appendChild(scale);
scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
if (i % 5 === 0) {
scale.style.width = 4 + 'px';
scale.style.height = 12 + 'px';
}
}
for (var i = 0; i < 12; i++) {
var num = document.createElement('div');
var numx = document.createElement('span');
num.classList.add('num');
num.style.transform = `translate(-50%) rotate(${i*30+30}deg)`;
numx.style.transform = `rotate(${-i*30-30}deg)`;
numx.innerHTML = i + 1;
disc.appendChild(num);
num.appendChild(numx);
}
var h = getTime().hours;
h = h > 12 ? h - 12 : h;
hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;
setInterval(function() {
var h = getTime().hours;
h = h > 12 ? h - 12 : h;
hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;
}, 1000)
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
month = month < 10 ? '0' + month : month;
var day = date.getDate();
day = day < 10 ? '0' + day : day;
var week = date.getDay();
var weeks = ['日', '一', '二', '三', '四', '五', '六'];
var weekZn = weeks[week];
var hou = date.getHours();
hou = hou < 10 ? '0' + hou : hou;
var min = date.getMinutes();
min = min < 10 ? '0' + min : min;
var sec = date.getSeconds();
sec = sec < 10 ? '0' + sec : sec;
return {
year: year,
month: month,
day: day,
week: weekZn,
hours: hou,
minute: min,
second: sec
}
}