前端炫酷效果（当前日期、生肖年）

本文主要是介绍前端炫酷效果（当前日期、生肖年），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

废话少说，直接上图：

使用方法：

vue2、vue3
类文件：

// 时间类

class Time {

getDate(time, type) {

let date = this.digitToChinesecharacterHandle(time, type)

return date

}

getNowHour() {

let date = new Date().getHours()

return date

}

getNowMinute() {

let date = new Date().getMinutes()

return date

}

getNowSecond() {

let date = new Date().getSeconds()

return date

}

}

// 当前时间特效

class NowTime extends Time{

constructor() {

super()

// 小时数据

this.s = [{ label: '凌晨一点ㅤ', id: 1, },{ label: '凌晨二点ㅤ', id: 2, },{ label: '凌晨三点ㅤ', id: 3, },{ label: '凌晨四点ㅤ', id: 4, },{ label: '凌晨五点ㅤ', id: 5, },{ label: '凌晨六点ㅤ', id: 6, },{ label: '上午七点ㅤ', id: 7, },{ label: '上午八点ㅤ', id: 8, },{ label: '上午九点ㅤ', id: 9, },{ label: '上午十点ㅤ', id: 10, },{ label: '上午十一点', id: 11, },{ label: '中午十二点', id: 12, },{ label: '下午一点ㅤ', id: 13, },{ label: '下午二点ㅤ', id: 14, },{ label: '下午三点ㅤ', id: 15, },{ label: '下午四点ㅤ', id: 16, },{ label: '下午五点ㅤ', id: 17, },{ label: '傍晚六点ㅤ', id: 18, },{ label: '傍晚七点ㅤ', id: 19, },{ label: '晚上八点ㅤ', id: 20, },{ label: '晚上九点ㅤ', id: 21, },{ label: '晚上十点ㅤ', id: 22, },{ label: '晚上十一点', id: 23, },{ label: '午夜零点ㅤ', id: 24, }]

// 分钟数据

this.m = [{ label: '一分ㅤㅤ', id: 1, },{ label: '二分ㅤㅤ', id: 2, },{ label: '三分ㅤㅤ', id: 3, },{ label: '四分ㅤㅤ', id: 4, },{ label: '五分ㅤㅤ', id: 5, },{ label: '六分ㅤㅤ', id: 6, },{ label: '七分ㅤㅤ', id: 7, },{ label: '八分ㅤㅤ', id: 8, },{ label: '九分ㅤㅤ', id: 9, },{ label: '十分ㅤㅤ', id: 10, },{ label: '十一分ㅤ', id: 11, },{ label: '十二分ㅤ', id: 12, },{ label: '十三分ㅤ', id: 13, },{ label: '十四分ㅤ', id: 14, },{ label: '十五分ㅤ', id: 15, },{ label: '十六分ㅤ', id: 16, },{ label: '十七分ㅤ', id: 17, },{ label: '十八分ㅤ', id: 18, },{ label: '十九分ㅤ', id: 19, },{ label: '二十分ㅤ', id: 20, },{ label: '二十一分', id: 21, },{ label: '二十二分', id: 22, },{ label: '二十三分', id: 23, },{ label: '二十四分', id: 24, },{ label: '二十五分', id: 25, },{ label: '二十六分', id: 26, },{ label: '二十七分', id: 27, },{ label: '二十八分', id: 28, },{ label: '二十九分', id: 29, },{ label: '三十分ㅤ', id: 30, },{ label: '三十一分', id: 31, },{ label: '三十二分', id: 32, },{ label: '三十三分', id: 33, },{ label: '三十四分', id: 34, },{ label: '三十五分', id: 35, },{ label: '三十六分', id: 36, },{ label: '三十七分', id: 37, },{ label: '三十八分', id: 38, },{ label: '三十九分', id: 39, },{ label: '四十分ㅤ', id: 40, },{ label: '四十一分', id: 41, },{ label: '四十二分', id: 42, },{ label: '四十三分', id: 43, },{ label: '四十四分', id: 44, },{ label: '四十五分', id: 45, },{ label: '四十六分', id: 46, },{ label: '四十七分', id: 47, },{ label: '四十八分', id: 48, },{ label: '四十九分', id: 49, },{ label: '五十分ㅤ', id: 50, },{ label: '五十一分', id: 51, },{ label: '五十二分', id: 52, },{ label: '五十三分', id: 53, },{ label: '五十四分', id: 54, },{ label: '五十五分', id: 55, },{ label: '五十六分', id: 56, },{ label: '五十七分', id: 57, },{ label: '五十八分', id: 58, },{ label: '五十九分', id: 59, },{ label: '零分ㅤㅤ', id: 60, }]

// 秒针数据

this.c = [{ label: '一秒ㅤㅤ', id: 1, },{ label: '二秒ㅤㅤ', id: 2, },{ label: '三秒ㅤㅤ', id: 3, },{ label: '四秒ㅤㅤ', id: 4, },{ label: '五秒ㅤㅤ', id: 5, },{ label: '六秒ㅤㅤ', id: 6, },{ label: '七秒ㅤㅤ', id: 7, },{ label: '八秒ㅤㅤ', id: 8, },{ label: '九秒ㅤㅤ', id: 9, },{ label: '十秒ㅤㅤ', id: 10, },{ label: '十一秒ㅤ', id: 11, },{ label: '十二秒ㅤ', id: 12, },{ label: '十三秒ㅤ', id: 13, },{ label: '十四秒ㅤ', id: 14, },{ label: '十五秒ㅤ', id: 15, },{ label: '十六秒ㅤ', id: 16, },{ label: '十七秒ㅤ', id: 17, },{ label: '十八秒ㅤ', id: 18, },{ label: '十九秒ㅤ', id: 19, },{ label: '二十秒ㅤ', id: 20, },{ label: '二十一秒', id: 21, },{ label: '二十二秒', id: 22, },{ label: '二十三秒', id: 23, },{ label: '二十四秒', id: 24, },{ label: '二十五秒', id: 25, },{ label: '二十六秒', id: 26, },{ label: '二十七秒', id: 27, },{ label: '二十八秒', id: 28, },{ label: '二十九秒', id: 29, },{ label: '三十秒ㅤ', id: 30, },{ label: '三十一秒', id: 31, },{ label: '三十二秒', id: 32, },{ label: '三十三秒', id: 33, },{ label: '三十四秒', id: 34, },{ label: '三十五秒', id: 35, },{ label: '三十六秒', id: 36, },{ label: '三十七秒', id: 37, },{ label: '三十八秒', id: 38, },{ label: '三十九秒', id: 39, },{ label: '四十秒ㅤ', id: 40, },{ label: '四十一秒', id: 41, },{ label: '四十二秒', id: 42, },{ label: '四十三秒', id: 43, },{ label: '四十四秒', id: 44, },{ label: '四十五秒', id: 45, },{ label: '四十六秒', id: 46, },{ label: '四十七秒', id: 47, },{ label: '四十八秒', id: 48, },{ label: '四十九秒', id: 49, },{ label: '五十秒ㅤ', id: 50, },{ label: '五十一秒', id: 51, },{ label: '五十二秒', id: 52, },{ label: '五十三秒', id: 53, },{ label: '五十四秒', id: 54, },{ label: '五十五秒', id: 55, },{ label: '五十六秒', id: 56, },{ label: '五十七秒', id: 57, },{ label: '五十八秒', id: 58, },{ label: '五十九秒', id: 59, },{ label: '六十秒ㅤ', id: 60, }]

// 背景图片在线地址

this.url = ''

// 中间时间中文数组

this.chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']

this.random = ['🐮', '🐒', '🐓', '🐕', '🐷', '🐭', '🐯', '🐇', '🐉', '🐍', '🐎', '🐏']

this.changeTime = 1000 // 变换时长

this.timer = null

this.fragmentHour = null

this.container = null

this.close = null

this.dot = null

this.line = null

this.hour = null

this.minute = null

this.secode = null

this.center = null

this.animals = null

this.secodenum = 0

this.minutenum = 0

this.hournum = 0

this.hourRotateTimer = null

this.minuteRotateTimer = null

this.secondRotateTimer = null

this.randomTimer = null

this.centerTimer = null

this.hourRotateNum = 0

this.minuteRotateNum = 0

this.secondRotateNum = 0

this.randomNum = 0

}

// 初始化调用功能函数

init(url = 'https://www.benbenla.cn/images/20111030/benbenla-02d.jpg') {

this.url = url

if(document.getElementsByClassName('nowTime-container')[0]) return

this.fragmentHour = document.createDocumentFragment() // 创建文档碎片容器

this.containerFn()

this.closeFn()

this.hourFn()

this.minuteFn()

this.secodeFn()

this.dotFn()

this.lineFn()

this.centerFn()

this.falseRotate()

this.twelveAnimals()

this.fragmentHour.appendChild(this.container)

document.body.appendChild(this.fragmentHour)

this.rotate()

}

// 中间圆点功能函数

dotFn() {

this.dot = document.createElement('div')

this.dot.classList.add('nowTime-dot')

this.dot.style.cssText = `z-index:10;width:5px;height:5px;border-radius:50%;background:rgba(255, 255, 0, .8);position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);`

this.container.appendChild(this.dot)

}

// 中间指针功能函数

lineFn() {

this.line = document.createElement('div')

this.line.classList.add('nowTime-line')

this.line.style.cssText = `z-index:10;width:400px;height:2px;border-radius:50%;background:rgba(255, 255, 255, .6);position:absolute;left:50%;top:50%;transform:translate(0%, -50%);`

this.container.appendChild(this.line)

}

// 最大容器功能函数

containerFn(){

this.container = document.createElement('div')

this.container.classList.add('nowTime-container')

this.container.style.cssText = `user-select:none;position:fixed;width:100%;height:100%;left:0;top:0;z-index:999;background-color:#ccc;`

this.container.style.backgroundImage = `url(${this.url})`

this.container.style.backgroundSize = `100% 100%`

}

// 关闭按钮功能函数

closeFn() {

this.close = document.createElement('div')

this.close.classList.add('nowTime-close')

this.close.innerHTML = '×'

this.close.style.cssText = `position:absolute;color:#fff;right:20px;top:10px;font-size:30px;cursor:pointer;font-weight:1000;`

this.close.onclick = () => {

document.body.removeChild(this.container)

}

this.container.appendChild(this.close)

}

// 时针功能函数

hourFn() {

this.hour = document.createElement('div')

this.hour.classList.add('nowTime-hour')

this.hour.style.cssText = `transition: all .2s linear;position: absolute;width:400px;height:400px;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:50%;`

for (let index = 0; index < this.s.length; index++) {

let hourItem = document.createElement('div') // 创建 24小时 div

hourItem.style.cssText = `color:rgba(255, 255, 255, 1);position:absolute;right:0;top:48.5%;font-size:13px;transform:rotateZ(${(index) * (360 / 24) + 12}deg);transform-origin:-135px;`

hourItem.classList.add('nowTime-hourItem')

hourItem.innerText = this.s[index].label

this.hour.appendChild(hourItem)

}

this.container.appendChild(this.hour)

}

// 分针功能函数

minuteFn() {

this.minute = document.createElement('div')

this.minute.classList.add('nowTime-minute')

this.minute.style.cssText = `transition: all .2s linear;position: absolute;width:600px;height:600px;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:50%;`

for (let index = 0; index < this.m.length; index++) {

let minuteItem = document.createElement('div') // 创建 60分钟 div

minuteItem.style.cssText = `color:rgba(255, 255, 255, 1);position:absolute;right:0;top:48.5%;font-size:13px;transform:rotateZ(${(index) * (360 / 60) - 2}deg);transform-origin:-248px;`

minuteItem.classList.add('nowTime-minuteItem')

minuteItem.innerText = this.m[index].label

this.minute.appendChild(minuteItem)

}

this.container.appendChild(this.minute)

}

// 中间年月日功能函数

centerFn() {

this.center = document.createElement('div')

this.center.classList.add('nowTime-center')

setTimeout(() => {

this.center.innerHTML = this.getDate(new Date().getFullYear(), 'year') + this.getDate(new Date().getMonth() + 1, 'month') + this.getDate(new Date().getDate(), 'day')

}, this.changeTime + 1)

this.center.style.cssText = `font-weight:1000;font-size:13px;color:#fff;position: absolute;left:51%;top:48.8%;transform:translate(-50%, -50%);`

this.container.appendChild(this.center)

}

// 秒针功能函数

secodeFn() {

this.secode = document.createElement('div')

this.secode.classList.add('nowTime-secode')

this.secode.style.cssText = `transition: all .2s linear;position: absolute;width:800px;height:800px;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:50%;`

for (let index = 0; index < this.m.length; index++) {

let secodeItem = document.createElement('div') // 创建 60秒 div

secodeItem.style.cssText = `color:rgba(255, 255, 255, 1);position:absolute;right:0;top:48.5%;font-size:13px;transform:rotateZ(${(index) * (360 / 60) - 1.6}deg);transform-origin:-348px;`

secodeItem.classList.add('nowTime-secodeItem')

secodeItem.innerText = this.c[index].label

this.secode.appendChild(secodeItem)

}

this.container.appendChild(this.secode)

}

// 最开始展示的时候，旋转的特效

falseRotate() {

if(this.hourRotateTimer) clearInterval(this.hourRotateTimer)

if(this.minuteRotateTimer) clearInterval(this.minuteRotateTimer)

if(this.secondRotateTimer) clearInterval(this.secondRotateTimer)

if(this.randomTimer) clearInterval(this.randomTimer)

if(this.centerTimer) clearInterval(this.centerTimer)

this.hourRotateTimer = setInterval(()=>{

this.hourRotateNum += 1

this.hour.style.transform = `translate(-50%, -50%) rotateZ(${-15 * this.hourRotateNum}deg)`

},50)

this.minuteRotateTimer = setInterval(()=>{

this.minuteRotateNum += 1

this.minute.style.transform = `translate(-50%, -50%) rotateZ(${6 * this.minuteRotateNum}deg)`

},50)

this.secondRotateTimer = setInterval(()=>{

this.secondRotateNum += 1

this.secode.style.transform = `translate(-50%, -50%) rotateZ(${-6 * this.secondRotateNum}deg)`

},50)

this.randomTimer = setInterval(()=>{

if(this.randomNum > 11) this.randomNum = 0

this.animals.innerHTML = this.random[this.randomNum]

this.randomNum += 1

},50)

this.centerTimer = setInterval(()=>{

let year_random = Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10)

let month_day_random = Math.floor(Math.random(0, 1) * 10) + '' + Math.floor(Math.random(0, 1) * 10)

this.center.innerHTML = this.getDate(year_random, 'year') + this.getDate(month_day_random, 'month') + this.getDate(month_day_random, 'day')

},50)

setTimeout(()=> {

this.hourRotateNum = 0

this.minuteRotateNum = 0

this.secondRotateNum = 0

clearInterval(this.hourRotateTimer)

clearInterval(this.minuteRotateTimer)

clearInterval(this.secondRotateTimer)

clearInterval(this.randomTimer)

clearInterval(this.centerTimer)

this.initNum()

}, this.changeTime)

}

// 初始化number以及旋转到当前时间点

initNum() {

this.hournum = this.getNowHour()

this.minutenum = this.getNowMinute()

this.secodenum = this.getNowSecond()

this.hour.style.transform = `translate(-50%, -50%) rotateZ(${-15 * this.hournum}deg)`

this.minute.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.minutenum - 1)}deg)`

this.secode.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.secodenum - 1)}deg)`

}

// 秒针旋转，每60s 分针转一圈，每60分m 时针转一圈

rotate() {

if(this.timer) clearInterval(this.timer)

this.timer = setInterval(() => {

++this.secodenum

if(this.secodenum && this.secodenum % 60 === 0){

if(this.minutenum >= 60){

this.minutenum = 0

}else{

this.minutenum += 1

}

this.minute.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.minutenum - 1)}deg)`

}

if(this.minutenum && this.minutenum % 60 === 0){

if(this.hournum >= 24){

this.hournum = 0

}else{

this.hournum += 1

}

this.hour.style.transform = `translate(-50%, -50%) rotateZ(${-15 * this.hournum}deg)`

}

this.secode.style.transform = `translate(-50%, -50%) rotateZ(${-6 * (this.secodenum - 1)}deg)`

}, 1000)

}

// 将数字年份转为汉字年份

digitToChinesecharacterHandle(time, type) {

let res = ''

time = time.toString().split('')

time.forEach(item => {

res = res + this.chinese[item * 1]

})

if(type === 'year'){

res = res + '年ㅤ'

}else if(type === 'month'){

res = res + '月ㅤ'

}else if(type === 'day'){

res = res + '日ㅤ'

}

return res

}

// 当年生肖功能函数

twelveAnimals() {

this.animals = document.createElement('div')

this.animals.classList.add('nowTime-animals')

setTimeout(()=> {

this.animals.innerHTML = this.animalsFn(new Date().getFullYear())

}, this.changeTime + 1)

this.animals.style.cssText = `z-index:10;color:#fff;font-size:30px;font-weight:1000;position:absolute;left:50%;top:46%;transform:translate(-50%, -50%);`

this.container.appendChild(this.animals)

}

// 判断是什么生肖

animalsFn(year) {

let res = ''

switch(year % 12) {

case 0:

res = '🐒'

break

case 1:

res = '🐓'

break

case 2:

res = '🐕'

break

case 3:

res = '🐷'

break

case 4:

res = '🐭'

break

case 5:

res = '🐮'

break

case 6:

res = '🐯'

break

case 7:

res = '🐇'

break

case 8:

res = '🐉'

break

case 9:

res = '🐍'

breakma

case 10:

res = '🐎'

break

case 11:

res = '🐏'

break

}

return res

}

}

export default new NowTime()