效果图
这个案例的每个位置的时间的切换是由两个<span>标签完成的
<li ref="hours1">
<span>0</span>
<span>0</span>
</li>
通过position: absolute;top:0;属性来达到切换的效果，显示当前时间的<span>的top值是0,之前的时间的<span>标签的top值改变为100%，哪个<span>标签获得spantop样式，就会隐藏起来，在这个过程中会逐渐变得模糊
//spantop样式
.time-box li .spantop {
top: -100%;
opacity: 0;
}
...........
//实现spantop的切换和时间的更新
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')
}
获取时间的方法，执行该方法会将data的noatime变量进行更新 this.noatime = this.acquisitiontime().split('')，利用split('')将得到的字符串变成一个数组
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
},
再通过if查看数组里的内容和<span>标签里的内容有无差别，有差别就会把新的内容给带有spantop样式的<span>标签，然后清除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>时钟特效</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在启动时生成生产提示
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)
},
})
