<template>
<div class="home-banner">
<img class="home-banner-view" src="./img/主KV.png" alt="" />
<img class="home-banner-IP" src="./img/IP.png" alt="" />
<div class="home-banner_time">
<div class="home-banner_time_box">
<div class="home-banner_time_box-title">距离开幕式还有:</div>
<div class="home-banner_time_box-time">
<!-- <span v-for="item in timeLeft" :class="`time_${item}`" :key="item"></span> -->
<div v-for="(item , index) in timeLeft" :class="`time_${item}`" :key="index"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
d: '',
h: '',
m: '',
timeLeft: 'd + h + m', // 默认包含天,时,分6位数
timer: null// 设置定时器默认为null
}
},
methods: {
toDou (n) { // n为行参,把对包含的字符串进行if判断
if (n < 10) { // 设置补0,不然影响数组长度和顺序
return '0' + n
} else {
return '' + n// 设置返回的一定是个字符串
}
},
init () { // 在方法外面再创建一个方法开启定时器,是为了防止产生递归,会造成以2的n次方来同时开启定时器,达咩
clearInterval(this.timer) // 每次开启前先关闭上次开启的定时器
this.timer = setInterval(() => {
this.countTime()
}, 1000)
},
countTime: function () {
const end = Date.parse(new Date('2021-4-29 14:10:10')) // 设置未来时间
const now = Date.parse(new Date()) // 当前时间
if (now >= end) { // 判断当前时间>=未来时间,因为时间到了,所以返回0
this.d = 0
this.h = 0
this.m = 0
return // 条件成立返回d,h,m为0
}
const msec = end - now// 设置msec为时差
let d = parseInt(msec / 1000 / 60 / 60 / 24) // 一开始生成的时间的单位是毫秒,除以1000之后为1秒
let h = parseInt(msec / 1000 / 60 / 60 % 24) // 以此类推,时差——秒——分——时-余24
let m = parseInt(msec / 1000 / 60 % 60) // 时差——秒——分-余60
this.timeLeft = this.toDou(d) + this.toDou(h) + this.toDou(m) // 通过转换设置该数组包含天,时,分6位数
}
},
mounted () { // 在模板渲染成html后调用,通常是初始化页面完成后
this.init()
}
}
</script>
<style lang="scss" scoped>
.home-banner {
&-IP {
position: fixed;
right: 34px;
bottom: 40px;
z-index: 99;
}
&-view{
width: 100%;
}
&_time {
height: 162px;
background: rgba(4, 8, 40, 1);
&_box {
width: 1200px;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
&-title {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
color: #ffffff;
line-height: 45px;
}
&-time {
margin-left: 20px;
display: flex;
:nth-child(3){
margin-left: 37px;
}
:nth-child(4){
margin-right: 48px;
}
div{
width: 25px;
height: 37px;
margin-left: 5px;
}
}
}
}
}
.time_0 {
background-image: url("./img/0.png")
}
.time_1 {
background-image: url("./img/1.png")
}
.time_2 {
background-image: url("./img/2.png")
}
.time_3 {
background-image: url("./img/3.png")
}
.time_4 {
background-image: url("./img/4.png")
}
.time_5 {
background-image: url("./img/5.png")
}
.time_6 {
background-image: url("./img/6.png")
}
.time_7 {
background-image: url("./img/7.png")
}
.time_8 {
background-image: url("./img/8.png")
}
.time_9 {
background-image: url('./img/9.png');
}
</style>
图片效果: