console
let second = ``;
for (let i = 0; i < 60; i++) {
let div = `<div id="second${i + 1}"
style="font-size:20px;width:100%;text-align:right;\
position:absolute;display:inline-block;transform:rotate(${(i - 1) * -6}deg);">${i + 1} 秒</div>`;
second += div;
}
document.querySelector('.second-box').innerHTML = second;
let minute = ``;
for (let i = 0; i < 60; i++) {
let div = `<div id="minute${i + 1}"
style="font-size:20px;width:100%;text-align:right;\
position:absolute;display:inline-block;transform:rotate(${i * - 6}deg);">${i + 1} 分</div>`;
minute += div;
}
document.querySelector('.minute-box').innerHTML = minute;
let hour = ``;
for (let i = 0; i < 24; i++) {
let div = `<div id="hour${i + 1}"
style="font-size:20px;width:100%;text-align:right;\
position:absolute;display:inline-block;transform:rotate(${i * -15}deg);">${i + 1} 时</div>`;
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();
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);">${i + 1} 日</div>`;
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);">${i + 1} 月</div>`;
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 += 1;
}
if (minute === 0 && oldminute !== minute) {
minute360 += 1;
}
if (hour === 0 && oldhour !== hour) {
hour360 += 1;
}
if (day === 0 && oldday !== day) {
day360 += 1;
}
if (month === 0 && oldmonth !== month) {
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('.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(`#minute${minute === 0 ? '60' : minute}`).classList = 'now-date';
document.querySelector(`#hour${hour === 0 ? '24' : 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);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, inital-scale=1.0" />
<title>CSS</title>
</head>
<body>
<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>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
}
.clock {
width: 100%;
height: 100%;
background: #141929;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #cad6dd;
overflow: hidden;
}
.now-date {
background-image: -webkit-linear-gradient(bottom, cyan, pink);
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, cyan, pink);
-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;
}