一個小時內用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，根據時差旋轉角度，這樣就避免了重新轉回。
就這樣吧，看起來還挺有趣的~~