JS特效——时钟轮盘
文章目录
一、制作思路
首先，先定义时分秒年月日的盒子，之后空着他，用JS创作元素，并且将元素添加到相应的盒子中，最后定义旋转的函数，定义好后，将函数放置到定时器中，定时一秒。
二、制作步骤
首先定义相应的盒子
<div class="secondBox"></div>
<div class="minuteBox"></div>
<div class="hourBox"></div>
<div class="dayBox"></div>
<div class="mounthBox"></div>
<div class="yearBox"></div>
为盒子渲染出自己喜欢的样式
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;
}
JS创建盒子里的内容并且将内容填充到相应的地方
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.querySelecter('.second').innerHTML = second
其他的几个指针都是相同的方法进行创建添加。
定义旋转的函数
var second360 = 0
var oldsecond = 0
function xuanzhuan(){
let nowdata = new Data()
let second = nowdata.getSeconds()
if(second==0&&oldsecond!==second){
second360 = second360+1
}
document.querySelector('.secondBox').style.transform = `rotate(${sencond360 * 360 + (sencond - 1) * 6}deg)`
//排他思想，设置当前的时间
let nowDates = document.querySelectorAll('.NowData')
nowDates.forEach(element => {
element.classList = ''
});
document.querySelector(`#sencond${sencond + 1}`).classList = 'NowData'
}
其他的几个指针都是相同的方法.
设置定时器将函数放进去
setInterval(() => {
transformBox()
}, 1000);
三、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
四、知识点
以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
-webkit-background-clip: text;
还可选content-box border-box padding-box
-webkit-text-fill-color: transparent;//文字改成透明，显现出渐变的底色，可应用RGBC()
五、效果展示
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
