html+css罗盘式旋转时钟

qq_31695557
已于 2022-02-12 11:19:50 修改
阅读量796
点赞数 1
分类专栏： html 文章标签： css html js
于 2022-02-08 17:49:21 首次发布
本文链接：https://blog.csdn.net/qq_31695557/article/details/122828532
版权
html 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
效果图
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>