效果圖
這個(gè)案例的每個(gè)位置的時(shí)間的切換是由兩個(gè)<span>標(biāo)簽完成的
<li ref="hours1">
<span>0</span>
<span>0</span>
</li>
通過(guò)position: absolute;top:0;屬性來(lái)達(dá)到切換的效果，顯示當(dāng)前時(shí)間的<span>的top值是0,之前的時(shí)間的<span>標(biāo)簽的top值改變?yōu)?00%，哪個(gè)<span>標(biāo)簽獲得spantop樣式，就會(huì)隱藏起來(lái)，在這個(gè)過(guò)程中會(huì)逐漸變得模糊
//spantop樣式
.time-box li .spantop {
top: -100%;
opacity: 0;
}
...........
//實(shí)現(xiàn)spantop的切換和時(shí)間的更新
repeat(a,c,d){
a.forEach(element => {
element.classList.remove('spantop')
});
let b = c?[0,1]:[1,0]
a[b[0]].innerText = this.noatime[d]
a[b[1]].classList.add('spantop')
}
獲取時(shí)間的方法，執(zhí)行該方法會(huì)將data的noatime變量進(jìn)行更新 this.noatime = this.acquisitiontime().split('')，利用split('')將得到的字符串變成一個(gè)數(shù)組
acquisitiontime() {
const date = new Date()
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
return hours + '' + minutes + '' + seconds
},
再通過(guò)if查看數(shù)組里的內(nèi)容和<span>標(biāo)簽里的內(nèi)容有無(wú)差別，有差別就會(huì)把新的內(nèi)容給帶有spantop樣式的<span>標(biāo)簽，然后清除spantop樣式
this.noatime = this.acquisitiontime().split('')
let a =this.statement()
if (this.noatime[0]!==a.hours1[0].innerText&& this.noatime[0]!==a.hours1[1].innerText) {
this.repeat(a.hours1,this.hours1,0)
this.hours1 = !this.hours1
}
.....................................
repeat(a,c,d){
a.forEach(element => {
element.classList.remove('spantop')
});
let b = c?[0,1]:[1,0]
a[b[0]].innerText = this.noatime[d]
a[b[1]].classList.add('spantop')
}
下面是所有的特效代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>時(shí)鐘特效</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<div class="big-box">
<h3>{{title}}</h3>
<ul class="time-box">
<li ref="hours1">
<span>0</span>
<span>0</span>
</li>
<li ref="hours2">
<span>0</span>
<span>0</span>
</li>
<li>
<i>:</i>
</li>
<li ref="minutes1">
<span>0</span>
<span>0</span>
</li>
<li ref="minutes2">
<span>0</span>
<span>0</span>
</li>
<li>
<i>:</i>
</li>
<li ref="seconds1">
<span>0</span>
<span>0</span>
</li>
<li ref="seconds2">
<span>0</span>
<span>0</span>
</li>
</ul>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
background: linear-gradient(-31deg,#222225 0%,#47474c 100%,#6e7ff3 100%);
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
h3,p {
margin: 0;
padding: 0;
}
.big-box {
width: 100%;
height: 100%;
margin: 100px auto;
text-align: center;
}
.big-box h3 {
font-size: 40px;
margin: 10px auto;
color: #4d5dc9;
text-shadow: -1px 1px 6px #4d5dc9a2;
}
.time-box {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 700px;
height: 280px;
margin: 0 auto;
padding: 0 20px;
background-color: #4d5dc9;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
.time-box li {
width: 100px;
height: 200px;
line-height: 200px;
text-align: center;
color: white;
font-size: 80px;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border-radius: 16px;
}
.time-box li:nth-child(3),.time-box li:nth-child(6){
width: 20px;
box-shadow: none;
}
.time-box li span {
display: block;
position: absolute;
top: 0;
width: 100px;
height: 200px;
line-height: 200px;
background-color: #9ca7ee;
opacity: 1;
transition: all 0.6s;
}
.time-box li .spantop {
top: -100%;
opacity: 0;
}
.time-box li i {
display: block;
font-size: 60px;
margin: 0;
padding: 0;
font-style: normal;
}
Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示
new Vue({
el: '#app',
data: {
noatime: '',
title: 'The time now is',
seconds2: true,
seconds1: true,
minutes2: true,
minutes1: true,
hours2: true,
hours1: true,
},
methods: {
acquisitiontime() {
const date = new Date()
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
return hours + '' + minutes + '' + seconds
},
statement(){
let seconds1 = this.$refs.seconds1.querySelectorAll('span')
let seconds2 = this.$refs.seconds2.querySelectorAll('span')
let minutes1 = this.$refs.minutes1.querySelectorAll('span')
let minutes2 = this.$refs.minutes2.querySelectorAll('span')
let hours1 = this.$refs.hours1.querySelectorAll('span')
let hours2 = this.$refs.hours2.querySelectorAll('span')
return {
seconds1,
seconds2,
minutes1,
minutes2,
hours1,
hours2
}
},
circulate(){
this.noatime = this.acquisitiontime().split('')
let a =this.statement()
if (this.noatime[0]!==a.hours1[0].innerText&& this.noatime[0]!==a.hours1[1].innerText) {
this.repeat(a.hours1,this.hours1,0)
this.hours1 = !this.hours1
}
if (this.noatime[1]!==a.hours2[0].innerText&& this.noatime[1]!==a.hours2[1].innerText) {
this.repeat(a.hours2,this.hours2,1)
this.hours2 = !this.hours2
}
if (this.noatime[2]!==a.minutes1[0].innerText&& this.noatime[2]!==a.minutes1[1].innerText) {
this.repeat(a.minutes1,this.minutes1,2)
this.minutes1 = !this.minutes1
}
if (this.noatime[3]!==a.minutes2[0].innerText&& this.noatime[3]!==a.minutes2[1].innerText) {
this.repeat(a.minutes2,this.minutes2,3)
this.minutes2 = !this.minutes2
}
if (this.noatime[4]!==a.seconds1[0].innerText&& this.noatime[4]!==a.seconds1[1].innerText) {
this.repeat(a.seconds1,this.seconds1,4)
this.seconds1 = !this.seconds1
}
if (this.noatime[5]!==a.seconds2[0].innerText&& this.noatime[5]!==a.seconds2[1].innerText) {
this.repeat(a.seconds2,this.seconds2,5)
this.seconds2 = !this.seconds2
}
},
repeat(a,c,d){
a.forEach(element => {
element.classList.remove('spantop')
});
let b = c?[0,1]:[1,0]
a[b[0]].innerText = this.noatime[d]
a[b[1]].classList.add('spantop')
}
},
mounted() {
setInterval(()=>{
this.circulate()
},1000)
},
})
