html+css罗盘式旋转时钟

效果图

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 = text1let 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 = sencondlet 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 = minutelet 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 = hourlet 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 = daylet 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 = mounthvar sencond360 = 0var Minute360 = 0var hour360 = 0var day360 = 0var mounth360 = 0var oldsencond = 0var oldMinute = 0var oldhour = 0var oldday = 0var oldmounth = 0function 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_valdocument.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_lendocument.querySelector(`#text${sencond+1}`).innerHTML = ''}console.log(text_num)//document.querySelector(`#text${text_num+1}`).innerHTML = ''oldsencond = sencondoldMinute = minuteoldhour = houroldday = dayoldmounth = mounth}transformBox()setInterval(() => {transformBox()}, 1000);</script>

html+css罗盘式旋转时钟相关推荐

罗盘式时钟的实现纯HTML 代码
前言一.罗盘式时钟代码二.程序演示与下载前言简单话不多,今天介绍一款看着有点黑科技的感觉,纯HTML实现的动态时间源码!可以放在你建站的首页里,例如很多站长在用wordpress进行二开,让你 ...
电脑罗盘时钟html怎么设置成桌面,HTML 罗盘式时钟的实现
代码块: js仿抖罗盘时钟 *{ margin:0; padding:0 } html,body{ width:100%; height:100%; background-color:#000; ov ...
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码,非常好看,里面充分的利用了对jq+css的使用,希望对于各位程序猿有帮助展示效果项目目录展示 html代码 css部分代码 * { ...
html中如何使图片自动旋转90度,css实现图片旋转90度的方法
css实现图片旋转90度的方法发布时间:2020-08-31 11:44:39 来源:亿速云阅读:550 作者:小新小编给大家分享一下css实现图片旋转90度的方法,相信大部分人都还不怎么了解, ...
jQuery+css3实现极具创意的罗盘旋转时钟效果源码
效果 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...

html+css罗盘式旋转时钟

html+css罗盘式旋转时钟相关推荐

最新文章

热门文章