效果图
HTML代码
<!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>
<style>
@font-face {
font-family: unidreamLED;
/* src: url("./UnidreamLED.ttf"); */
}
body {
font-size: 0px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #71767D;
overflow: hidden;
background-color: #141929;
font-family: unidreamLED;
}
.NowData {
background-image: -webkit-linear-gradient(bottom, rgb(192 192 192), rgb(241 100 171));
background-size: 100% 20px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.yearBox {
height: 7vh;
width: 7vh;
position: absolute;
display: flex;
font-size: 10px;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 1s;
background-image: -webkit-linear-gradient(bottom, rgb(192 192 192), rgb(120 8 220));
background-size: 100% 20px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mounthBox {
height: 14vh;
width: 14vh;
position: absolute;
display: flex;
align-items: center;
border-radius: 50%;
transition: 1s;
}
.dayBox {
height: 21vh;
width: 21vh;
border-radius: 50%;
display: flex;
align-items: center;
position: absolute;
transition: 1s;
}
.hourBox {
height: 28vh;
width: 28vh;
position: absolute;
display: flex;
align-items: center;
transition: 1s;
border-radius: 50%;
}
.minuteBox {
height: 35vh;
width: 35vh;
position: absolute;
display: flex;
align-items: center;
border-radius: 50%;
transition: 1s;
}
.secondBox {
height: 42vh;
width: 42vh;
display: flex;
align-items: center;
position: absolute;
border-radius: 50%;
transition: 1s;
}
.text {
height: 49vh;
width: 49vh;
position: absolute;
display: flex;
align-items: center;
border-radius: 50%;
transition: 1s;
font-weight:900
}
</style>
</head>
<body>
<div class="secondBox"></div>
<div class="minuteBox"></div>
<div class="hourBox"></div>
<div class="dayBox"></div>
<div class="mounthBox"></div>
<div class="yearBox"></div>
<!-- 文字展示 -->
<div class="text"></div>
</body>
</html>
<script>
var text_content=['','龙','腾','虎','跃',',','驰','骋','不','息'];
var app_text=text_content;
var text_len=text_content.length;
//文字展示
let text1 =''
for (i = 0; i < 60; i++) {
let onediv = `<div id = "text${i+1}" style="font-size: 10px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-6}deg);"> -</div>`
text1 +=onediv
}
document.querySelector('.text').innerHTML = text1
let sencond =''
for (i = 0; i < 60; i++) {
let onediv = `<div id = "sencond${i+1}" style="font-size: 10px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i-1)*-6}deg);"> ${i+1} 秒</div>`
sencond = sencond + onediv
}
document.querySelector('.secondBox').innerHTML = sencond
let minute = ``
for (i = 0; i < 60; i++) {
let onediv = `<div id = "minute${i+1}" style="font-size: 10px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-6}deg);"> ${i+1} 分</div>`
minute = minute + onediv
}
document.querySelector('.minuteBox').innerHTML = minute
let hour = ``
for (i = 0; i < 24; i++) {
let onediv = `<div id = "hour${i+1}" style="font-size: 10px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-15}deg);"> ${i+1} 时</div>`
hour = hour + onediv
}
document.querySelector('.hourBox').innerHTML = hour
let day = ``
for (i = 0; i < 31; i++) {
let onediv = `<div id = "day${i+1}" style="font-size: 10px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-11.25}deg);"> ${i+1} 日</div>`
day = day + onediv
}
document.querySelector('.dayBox').innerHTML = day
let mounth = ``
for (i = 0; i < 12; i++) {
let onediv = `<div id = "mounth${i+1}" style="font-size: 10px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-30}deg);"> ${i+1} 月</div>`
mounth = mounth + onediv
}
document.querySelector('.mounthBox').innerHTML = mounth
var sencond360 = 0
var Minute360 = 0
var hour360 = 0
var day360 = 0
var mounth360 = 0
var oldsencond = 0
var oldMinute = 0
var oldhour = 0
var oldday = 0
var oldmounth = 0
function transformBox() {
let nowDate = new Date()
let sencond = nowDate.getSeconds()
let minute = nowDate.getMinutes()
let hour = nowDate.getHours()
let day = nowDate.getDate()
let mounth = nowDate.getMonth()
let year = nowDate.getFullYear()
if (sencond === 0 && oldsencond !== sencond) {
sencond360 = sencond360 + 1
}
if (minute === 0 && oldMinute !== minute) {
Minute360 = Minute360 + 1
}
if (hour === 0 && oldhour !== hour) {
hour360 = hour360 + 1
}
if (day === 1 && oldday !== day) {
day360 = day360 + 1
}
if (mounth === 0 && oldmounth !== mounth) {
mounth360 = mounth360 + 1
}
document.querySelector('.secondBox').style.transform = `rotate(${sencond360*360 + (sencond-1)*6}deg)`
document.querySelector('.minuteBox').style.transform = `rotate(${Minute360*360 + (minute-1)*6}deg)`
document.querySelector('.hourBox').style.transform = `rotate(${hour360*360 + (hour-1)*15}deg)`
document.querySelector('.dayBox').style.transform = `rotate(${day360*360 + (day-1)*11.25}deg)`
document.querySelector('.mounthBox').style.transform = `rotate(${mounth360*360 + (mounth)*30}deg)`
document.querySelector('.yearBox').innerHTML = year + ' 年'
let nowDates = document.querySelectorAll('.NowData')
nowDates.forEach(element => {
element.classList = ''
});
document.querySelector(`#sencond${sencond+1}`).classList = 'NowData'
document.querySelector(`#minute${minute===0?'60':minute}`).classList = 'NowData'
document.querySelector(`#hour${hour===0?'24':hour}`).classList = 'NowData'
document.querySelector(`#day${day}`).classList = 'NowData'
document.querySelector(`#mounth${mounth+1}`).classList = 'NowData'
//文本高亮
var text_num=0;
var text_val=text_content.shift();
text_content.push(text_val)
text_append=text_content[text_num];
if(text_append===undefined){
text_append='';
}
console.log(text_val)
text_num=app_text.indexOf(text_val)+1;
document.querySelector(`#text${1}`).classList = 'NowData'
if(text_num>1){
document.querySelector(`#text${sencond+1}`).innerHTML = ''
}
document.querySelector(`#text${1}`).innerHTML = text_val
document.querySelector(`#text${sencond-1}`).innerHTML = '-'
text_num=text_num-1;
if(text_num==text_len){
console.log('==')
}
console.log(text_len)
if(text_num==0){
text_num=60;//text_len
document.querySelector(`#text${sencond+1}`).innerHTML = ''
}
console.log(text_num)
//document.querySelector(`#text${text_num+1}`).innerHTML = ''
oldsencond = sencond
oldMinute = minute
oldhour = hour
oldday = day
oldmounth = mounth
}
transformBox()
setInterval(() => {
transformBox()
}, 1000);
</script>