vue中实现倒计时组件与毫秒效果

时分秒倒计时组件

template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <!-- 倒计时组件 -->
  <div class="downTime-wrapper">
    <!-- 这里是显示还未结束时的内容，这里只是我这得布局，你可以随意。 -->
    <div class="time" v-show="!isShow">
      <!-- <span class="hour">{{myDay}}</span> : -->
      <div class="hour">
        <span>{{ getHours1 }}</span>
        <span>{{ getHours2 }}</span>
      </div>
      <span class="dian">:</span>
      <div class="minute">
        <span>{{ getMinutes1 }}</span>
        <span>{{ getMinutes2 }}</span>
      </div>
      <span class="dian">:</span>
      <div class="second">
        <span>{{ getSeconds1 }}</span>
        <span>{{ getSeconds2 }}</span>
      </div>
    </div>
    <!-- 这里是显示结束后的内容 -->
    <span class="second" v-show="isShow">{{clocker}}</span>
  </div>
</template>

script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script>
export default {
  name: 'downTime',

  props: { // 接收父组件传递过来的参数,这里传了  结束时间 - 开始时间 - 结束后显示的内容
    endTime: {
      type: Number
    },
    startTime: {
      type: Number
    },
    endMsg: {
      type: String
    }
  },

  data () {
    return {
      isShow: false, // 控制显示结束或还未结束显示的内容
      clocker: '', // 结束后显示的内容
      timeObj: null, // 时间对象,下方会用到
      myDay: 0, // 我定义来接收计算出来的 天 的
      myHours: 0, // 我定义来接收计算出来的 小时 的
      myMinutes: 0, // 我定义来接收计算出来的 分钟 的
      mySeconds: 0// 我定义来接收计算出来的 秒钟 的
    }
  },
  computed: {
    getHours1 () {
      return this.myHours < 10 ? 0 : parseInt((this.myHours % 100) / 10)
    },
    getHours2 () {
      return parseInt(this.myHours % 10)
    },
    getMinutes1 () {
      return this.myMinutes < 10 ? 0 : parseInt((this.myMinutes % 100) / 10)
    },
    getMinutes2 () {
      return parseInt(this.myMinutes % 10)
    },
    getSeconds1 () {
      return this.mySeconds < 10 ? 0 : parseInt((this.mySeconds % 100) / 10)
    },
    getSeconds2 () {
      return parseInt(this.mySeconds % 10)
    }
  },
  mounted () {
  },
  methods: {
    option () {
      // 计算时间差
      let timeLag = (this.endTime - this.startTime) / 1000
      // 判断当前是否时分秒的值是否大于10
      const add = num => {
        return num < 10 ? '0' + num : num
      }
      // 时间倒计时运算的方法
      const timeFunction = () => {
        const time = timeLag--
        this.timeObj = { // 时间对象
          seconds: Math.floor(time % 60),
          minutes: Math.floor(time / 60) % 60,
          hours: Math.floor(time / 60 / 60) % 24,
          days: Math.floor(time / 60 / 60 / 24)
        }
        // 计算出时分秒
        this.myDay = `${add(this.timeObj.days)}`
        this.myHours = `${add(this.timeObj.hours)}`
        this.myMinutes = `${add(this.timeObj.minutes)}`
        this.mySeconds = `${add(this.timeObj.seconds)}`
        // 当时间差小于等于0时,停止倒计时
        if (time <= 0) {
          this.isShow = true
          this.clocker = this.endMsg
          clearInterval(go)
        }
      }
      // 开始执行倒计时
      timeFunction()
      // 每一秒执行一次
      const go = setInterval(() => {
        timeFunction()
      }, 1000)
    }
  },
    watch: {
        endTime: {
          handler (newName, oldName) {
            this.option()
          },
          immediate: true,
          deep: true
        }
     }
}
</script>

备注：我将时分秒使用计算属性分成了个位和十位两部分展示，在watch中深度监听endTime属性的变化并重新调用定时器

style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style lang="scss" scoped>
.downTime-wrapper{
  display: inline-block;
  .dian {
    font-weight: bold;
    position: relative;
    top: -5px;
  }
  .hour{
    display: inline-block;
    font-size: 36px;
    span {
      border-radius:6px;
      color: #FFFFFF;
      background:rgba(27,23,22,1);
      padding: 1px 10px;
      margin: 0 2px;
    }
  }
  .minute{
    display: inline-block;
    font-size: 36px;
    span {
      border-radius:6px;
      color: #FFFFFF;
      background:rgba(27,23,22,1);
      padding: 1px 10px;
      margin: 0 2px;
    }
  }
  .second {
    display: inline-block;
    font-size: 36px;
    margin-top: -5px;
    span {
      border-radius:6px;
      color: #FFFFFF;
      background:rgba(27,23,22,1);
      padding: 1px 10px;
      margin: 0 2px;
    }
  }
}
</style>

使用

在页面中引入并注册后即可使用

1
2
3
4
5
<timer
  :endTime="item.endTime"
  :startTime="new Date().getTime()"
  :endMsg="item.endMsg">
</timer>

毫秒倒计时效果

在template中加入
<b id="timehs">:00</b>

声明timeDt方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
methods: {
    timeDt () {
      this.timer1 = setTimeout(function () {
        var haomiao = 99
        document.getElementById('timehs').innerHTML = ':' + haomiao
        this.timer2 = setInterval(function () {
          const timehs = document.getElementById('timehs')
          if (timehs) {
            timehs.innerHTML = `:${haomiao < 10 ? `0${haomiao}` : haomiao}`
          }
          haomiao--
          if (haomiao < 0) {
            haomiao = 99
          }
        }, 10)
      }, 1000)
    }
  }

在create生命周期函数中调用timeDt方法

1
2
3
4
5
created () {
    this.$nextTick(() => {
      this.timeDt()
    })
  },
日常开发
vue 组件化

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！