---

效果图

---

---

html

<div class="clock"><div class="second-box"></div><div class="minute-box"></div><div class="hour-box"></div><div class="day-box"></div><div class="month-box"></div><div class="year-box"></div>
</div>

---

JavaScript

function zeroFill(val = 1, len = 2) {return String(val).padStart(len, '0');
}let second = ``;
for (let i = 0; i < 60; i++) {let div = `<div id="second${i}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${(i - 1) * -6}deg);">${zeroFill(i)}秒</div>`;second = second + div;
}
document.querySelector('.second-box').innerHTML = second;let minute = ``;
for (let i = 0; i < 60; i++) {let div = `<div id="minute${i}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${i * -6}deg);">${zeroFill(i)}分</div>`;minute = minute + div;
}
document.querySelector('.minute-box').innerHTML = minute;let hour = ``;
for (let i = 0; i < 24; i++) {let div = `<div id="hour${i}" style="position: absolute; width: 100%; display: inline-block; text-align: right; font-size: 20px; transform: rotate(${(i -1) * -15}deg);">${zeroFill(i)}时</div>`;hour = hour + div;
}
document.querySelector('.hour-box').innerHTML = hour;let day = ``;
// 每个月的天数
let _days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let _now = new Date();
let _year = _now.getFullYear();
let _month = _now.getMonth();
// 判断闰年的天数 二月为29天
if (_year % 4 === 0 && (_year % 100 !== 0 || _year % 400 === 0)) _days[1] = 29;
// 计算平均角度
let _deg = 360 / _days[_month];
for (let i = 0; i < _days[_month]; i++) {let div = `<div id="day${i + 1}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${i * -1 * _deg}deg);">${zeroFill(i + 1)}日</div>`;day = day + div;
}
document.querySelector('.day-box').innerHTML = day;let month = ``;
for (let i = 0; i < 12; i++) {let div = `<div id="month${i + 1}" style="font-size: 20px; width: 100%; text-align: right; position: absolute; display: inline-block; transform: rotate(${i * -30}deg);">${zeroFill(i + 1)}月</div>`;month = month + div;
}
document.querySelector('.month-box').innerHTML = month;let second360 = 0;
let minute360 = 0;
let hour360 = 0;
let day360 = 0;
let month360 = 0;let oldsecond = 0;
let oldminute = 0;
let oldhour = 0;
let oldday = 0;
let oldmonth = 0;function transformBox() {let nowDate = new Date();let second = nowDate.getSeconds();let minute = nowDate.getMinutes();let hour = nowDate.getHours();let day = nowDate.getDate();let month = nowDate.getMonth();let year = nowDate.getFullYear();if (second === 0 && oldsecond !== second) second360 = second360 + 1;if (minute === 0 && oldminute !== minute) minute360 = minute360 + 1;if (hour === 0 && oldhour !== hour) hour360 = hour360 + 1;if (day === 0 && oldday !== day) day360 = day360 + 1;if (month === 0 && oldmonth !== month) month360 = month360 + 1;document.querySelector('.second-box').style.transform = `rotate(${second360 * 360 + (second - 1) * 6}deg)`;// document.querySelector('.minute-box').style.transform = `rotate(${minute360 * 360 + (minute - 1) * 6}deg)`;document.querySelector('.minute-box').style.transform = `rotate(${minute360 * 360 + (minute) * 6}deg)`;document.querySelector('.hour-box').style.transform = `rotate(${hour360 * 360 + (hour - 1) * 15}deg)`;document.querySelector('.day-box').style.transform = `rotate(${day360 * 360 + (day - 1) * _deg}deg)`;document.querySelector('.month-box').style.transform = `rotate(${month360 * 360 + month * 30}deg)`;document.querySelector('.year-box').innerHTML = year + '年';let nowDates = document.querySelectorAll('.now-date');nowDates.forEach((ele) => {ele.classList = '';});// document.querySelector(`#second${second + 1}`).classList = 'now-date';document.querySelector(`#second${second}`).classList = 'now-date';// document.querySelector(`#minute${minute===0?'60':minute}`).classList = 'now-date';document.querySelector(`#minute${minute}`).classList = 'now-date';// document.querySelector(`#hour${hour===0?'24':hour}`).classList = 'now-date';document.querySelector(`#hour${hour}`).classList = 'now-date';document.querySelector(`#day${day}`).classList = 'now-date';document.querySelector(`#month${month + 1}`).classList = 'now-date';oldsecond = second;oldminute = minute;oldhour = hour;oldday = day;oldmonth = month;
}transformBox();setInterval(() => {transformBox();
}, 1000);

---

style

/* 引入LED字体 *//* @font-face {font-family: UnidreamLED;src: url('UnidreamLED.ttf');
} */* {margin: 0;padding: 0;
}body {width: 100%;height: 100%;
}.clock {width: 100%;height: 100%;background-color: #141929;position: absolute;display: flex;justify-content: center;align-items: center;color: #cad6dd;overflow: hidden;/* font-family: UnidreamLED; */
}/* 当前时间样式 */.now-date {background-image: -webkit-linear-gradient(bottom, yellow, red);background-size: 100% 20px;-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}.year-box {width: 10vh;height: 10vh;position: absolute;display: flex;font-size: 20px;justify-content: center;align-items: center;border-radius: 50%;transition: 1s;background-image: -webkit-linear-gradient(bottom, yellow, red);background-size: 100% 20px;-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}.month-box {width: 25vh;height: 25vh;position: absolute;display: flex;align-items: center;border-radius: 50%;transition: 1s;
}.day-box {width: 40vh;height: 40vh;position: absolute;display: flex;align-items: center;border-radius: 50%;transition: 1s;
}.hour-box {width: 55vh;height: 55vh;position: absolute;display: flex;align-items: center;border-radius: 50%;transition: 1s;
}.minute-box {width: 70vh;height: 70vh;position: absolute;display: flex;align-items: center;border-radius: 50%;transition: 1s;
}.second-box {width: 85vh;height: 85vh;position: absolute;display: flex;align-items: center;border-radius: 50%;transition: 1s;
}