js实现简单圆盘时钟
作者：山与小岛
这篇文章主要为大家详细介绍了js实现简单圆盘时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现简单圆盘时钟的具体代码，供大家参考，具体内容如下
预览图：
代码：
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
}
}
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。