限时秒杀计时器

最新推荐文章于 2024-06-14 11:01:38 发布

cw_csdn

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量82

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/cw_csdn/article/details/134121812

版权

<template>
  <div class="setInterval">
    <div class="text">限时秒杀</div>
    <div class="setInterval_time">
      <div class="hour">{{ hour }}</div>
      <span>:</span>
      <div class="min">{{ min }}</div>
      <span>:</span>
      <div class="second">{{ second }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MySetInterval',
  data() {
    return {
      hour: '02',
      min: '01',
      second: '10'
    }
  },
  mounted() {
    this.mySetInterval(1000)
  },
  methods: {
    mySetInterval(delay) {
      this.timer = setInterval(() => {
        if (Number(this.second) > 0) {
          if (this.second <= 10) this.second = `0${Number(this.second) - 1}`
          else if (this.second < 60) this.second--
        } else {
          if (Number(this.min) > 0) {
            this.second = 59
            if (this.min <= 10) this.min = `0${Number(this.min) - 1}`
            else if (this.min < 60 && this.min > 10) this.min--
          } else if (Number(this.min) === 0 && Number(this.hour) > 0) {
            this.second = 59
            this.min = 59
            if (this.hour <= 10) this.hour = `0${Number(this.hour) - 1}`
            else if (this.hour < 60 && this.hour > 10) this.hour--
          } else clearInterval(this.timer)
        }
      }, delay)
    }
  }
}
</script>

<style scoped lang="scss">
.setInterval {
  width: 200px;
  background: red !important;
  .setInterval_time {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    > div {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 30px;
      text-align: center;
      color: #fff;
      background: #2f3430;
    }
    > span {
      width: 10px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      font-size: 40px;
    }
  }
  .text {
    height: 30px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 50px;
  }
}
</style>