龙空技术网

时钟轮盘代码

我们全都是龙的传人 446

前言:

目前小伙伴们对“csssecond”大概比较关注,你们都想要学习一些“csssecond”的相关文章。那么小编也在网络上搜集了一些关于“csssecond””的相关资讯,希望同学们能喜欢,你们快快来了解一下吧!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8-sig">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

body {

font-size: 0px;

height: 100%;

width: 100%;

padding: 0;

margin: 0;

position: absolute;

display: flex;

justify-content: center;

align-items: center;

color: #cad6dd;

overflow: hidden;

background-color: #141929;

}

.NowData {

background-image: -webkit-linear-gradient(bottom, rgb(255 0 0), rgb(120 8 220));

background-size: 100% 20px;

/* 以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉。 */

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.yearBox {

height: 10vh;

width: 10vh;

position: absolute;

display: flex;

font-size: 16px;

align-items: center;

justify-content: center;

border-radius: 50%;

transition: 1s;

background-image: -webkit-linear-gradient(bottom, rgb(255 0 0), rgb(120 8 220));

background-size: 100% 20px;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.mounthBox {

height: 25vh;

width: 25vh;

position: absolute;

display: flex;

align-items: center;

border-radius: 50%;

transition: 1s;

}

.dayBox {

height: 40vh;

width: 40vh;

border-radius: 50%;

display: flex;

align-items: center;

position: absolute;

transition: 1s;

}

.hourBox {

height: 55vh;

width: 55vh;

position: absolute;

display: flex;

align-items: center;

transition: 1s;

border-radius: 50%;

}

.minuteBox {

height: 70vh;

width: 70vh;

position: absolute;

display: flex;

align-items: center;

border-radius: 50%;

transition: 1s;

}

.secondBox {

height: 85vh;

width: 85vh;

display: flex;

align-items: center;

position: absolute;

border-radius: 50%;

transition: 1s;

}

</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>

<script>

// 这里的反引号是引号的增强版的,在反引号中可以通过${}来引入变量

let second = '';

for (let i = 0; i < 60; i++) {

let onesecond = `<div id = "sencond${i + 1}"style="font-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i - 1) * -6}deg);"> ${i + 1} 秒</div>`

second = second + onesecond;

}

document.querySelector('.secondBox').innerHTML = second;

// let sencond = ''

// for (i = 0; i < 60; i++) {

// let onediv = `<div id = "sencond${i + 1}" style="font-size: 16px;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: 16px;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: 16px;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: 16px;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: 16px;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) {

// 这个的目的是当时间到00初的时候为了防止时间猛然从354°转到6°这种反向快转,索性将时间改成366°,sencond360就是记录要转几个整圈

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 + ' 年'

//定义当前时间的格式

// 这个是排他思想,

// 在看这里,这是将已有的nowdata清除,为最新的留空

let nowDates = document.querySelectorAll('.NowData')

nowDates.forEach(element => {

element.classList = ''

});

// 先看这里,这里先定义当前时间为nowdata

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'

// 重置最新时间

oldsencond = sencond

oldMinute = minute

oldhour = hour

oldday = day

oldmounth = mounth

}

// 先调用一下,显示出当前的时间

transformBox()

// 设置定时器,每秒调用一下这个函数

// setInterval(() => {

// transformBox()

// }, 1000);

</script>

</body>

</html>

贴入TXT文件,然后修改为html,浏览器设置自动刷新为1秒(我用的搜狗浏览器,安了个刷新插件。)

标签: #csssecond