vue实现点击按钮倒计时

本文实例为大家分享了vue实现点击按钮倒计时的具体代码，供大家参考，具体内容如下
实现效果：
1.点击开始按钮启动计时

2.点击重置按钮计时恢复到00:00:00
3.点击暂停按钮暂停计时
Vue代码：

1. <template>
2. <div>
3.   <div class="timeContainer">{{ time }}</div>
4.   <a-button style="margin-right: 20px" type="primary" @click="start"
5.    >开始</a-button
6.   >
7.   <a-button style="margin-right: 20px" type="primary" @click="reset"
8.    >重置</a-button
9.   >
10.   <a-button type="primary" @click="end">暂停</a-button>
11. </div>
12. </template>
14. <script>
15. export default {
16. data() {
17.   return {
18.    flag: null,
19.    hour: 0,
20.    minute: 0,
21.    second: 0,
22.    time: "00:00:00",
23.   };
24. },
25. methods: {
26.   //开始计时
27.   start() {
28.    this.flag = setInterval(() => {
29.     this.second = this.second + 1;
30.     if (this.second >= 60) {
31.      this.second = 0;
32.      this.minute = this.minute + 1;
33.     }
35.     if (this.minute >= 60) {
36.      this.minute = 0;
37.      this.hour = this.hour + 1;
38.     }
39.     this.time =
40.      this.complZero(this.hour) +
41.      ":" +
42.      this.complZero(this.minute) +
43.      ":" +
44.      this.complZero(this.second);
45.    }, 1000);
46.   },
47.   //重新计时
48.   reset() {
49.    window.clearInterval(this.flag);
50.    this.hour = 0;
51.    this.minute = 0;
52.    this.second = 0;
53.    this.time = "00:00:00";
54.   },
55.   //暂停计时
56.   end() {
57.    this.flag = clearInterval(this.flag);
58.   },
59.   //补零
60.   complZero(n) {
61.    return n < 10 ? "0" + n : "" + n;
62.   },
63. },
64. };
65. </script>
66. <style>
67. .timeContainer {
68. font-size: 40px;
69. margin-bottom: 10px;
70. }
71. </style>

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。