vue实现图片轮播倒计时，天，时，分

<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>

图片效果：