一个小时内用jQuery写出来的,效果看上去还不错。
这里先放个效果图
整个HTML页面
注
- 运动速度找transition,我设置的是1s
- 显隐颜色找activeColor noActiveColor
- 圆间距找dPx
- 以上三点都可以自定义,其他的要自定义自己改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>罗盘时钟</title>
</head>
<body>
<div class="timer">
<div class="container">
<div id="month">
</div>
</div>
<div class="container">
<div id="day">
</div>
</div>
<div class="container">
<div id="hour">
</div>
</div>
<div class="container">
<div id="minute">
</div>
</div>
<div class="container">
<div id="second">
</div>
</div>
</div>
</body>
<style>
body {
padding: 0;
margin: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
font-size: 12px;
}
.timer {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
#month,
#day,
#hour,
#minute,
#second {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#month span,
#day span,
#hour span,
#minute span,
#second span {
position: absolute;
box-sizing: border-box;
white-space: nowrap;
color: #666;
transition: all 1s;
display: flex;
justify-content: center;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
(function () {
let monthLength = 12, monthHtml = '',
dayLength = (new Date(new Date().getFullYear(), parseInt(new Date().getMonth() + 1), 0)).getDate(), dayHtml = '',
hourLength = 24, hourHtml = '',
minuteLength = 60, minuteHtml = '',
secondLength = 60, secondHtml = '', dPx = 35, startDate = new Date(),
activeColor = '#fff', noActiveColor = '#666'
for (let i = 0; i < monthLength; i++) {
monthHtml += `<span>${i + 1}月</span>`
}
for (let i = 0; i < dayLength; i++) {
dayHtml += `<span>${i + 1}日</span>`
}
for (let i = 0; i < hourLength; i++) {
hourHtml += `<span>${i < 10 ? '0' + i : i}点</span>`
}
for (let i = 0; i < minuteLength; i++) {
minuteHtml += `<span>${i < 10 ? '0' + i : i}分</span>`
}
for (let i = 0; i < secondLength; i++) {
secondHtml += `<span>${i < 10 ? '0' + i : i}秒</span>`
}
$('#month').html(monthHtml)
$('#day').html(dayHtml)
$('#hour').html(hourHtml)
$('#minute').html(minuteHtml)
$('#second').html(secondHtml)
getTime()
clearInterval(this.timer)
this.timer = setInterval(() => {
getTime()
}, 1000);
function getTime() {
let nowDate = new Date()
let nowMonth = nowDate.getMonth() + 1,
nowDay = nowDate.getDate(),
nowHour = nowDate.getHours(),
nowMinute = nowDate.getMinutes(),
nowSecond = nowDate.getSeconds(),
dMinute = startDate.getMinutes() - nowMinute,
dHour = startDate.getHours() - nowHour,
dDay = startDate.getDate() - nowDay,
dMonth = nowDate.getMonth() + 1 - nowMonth
$('#month span').each((index, item) => {
if (nowMonth == index + 1) item.style.color = activeColor
else item.style.color = noActiveColor
item.style.transform = `rotate(${(360 / (monthLength)) * (index + 1 - nowMonth + 12 * dMonth)}deg) translateX(${dPx}px)`
})
$('#day span').each((index, item) => {
if (nowDay == index + 1) item.style.color = activeColor
else item.style.color = noActiveColor
item.style.transform = `rotate(${(360 / (dayLength)) * (index + 1 - nowDay + dayLength * dDay)}deg) translateX(${dPx * 2}px)`
})
$('#hour span').each((index, item) => {
if (nowHour == index) item.style.color = activeColor
else item.style.color = noActiveColor
item.style.transform = `rotate(${(360 / (hourLength)) * (index - nowHour + 24 * dDay)}deg) translateX(${dPx * 3}px)`
})
$('#minute span').each((index, item) => {
if (nowMinute == index) item.style.color = activeColor
else item.style.color = noActiveColor
item.style.transform = `rotate(${(360 / (minuteLength)) * (index - nowMinute + 60 * dHour)}deg) translateX(${dPx * 4}px)`
})
$('#second span').each((index, item) => {
if (nowSecond == index) item.style.color = activeColor
else item.style.color = noActiveColor
item.style.transform = `rotate(${(360 / (secondLength)) * (index - nowSecond + 60 * dMinute)}deg) translateX(${dPx * 5}px)`
})
}
})();
</script>
</html>
结尾:其实写下来也没多少东西。
无非就是怎么排成一个画圆,根据rotate旋转,将360等分。
然后根据translate排圆的半径,排好后,再给个transition动画设置时长。
给个定时器,每秒获取时间改变每个span标签的样式。
有了transition就有动画了,根据你拍的顺序它就会逆/顺时针旋转了。
为了每次不到00时,转一大圈,我还初始设置了startDate,根据时差旋转角度,这样就避免了重新转回。
就这样吧,看起来还挺有趣的~~