vue实现点击按钮倒计时

本文实例为大家分享了vue实现点击按钮倒计时的具体代码，供大家参考，具体内容如下

实现效果：

1.点击开始按钮启动计时

2.点击重置按钮计时恢复到0

3.点击暂停按钮暂停计时

Vue代码：

<template>
? <div>
? ? <div class="timeContainer">{{ time }}</div>
? ? <a-button style="margin-right: 20px" type="primary" @click="start"
? ? ? >开始</a-button
? ? >
? ? <a-button style="margin-right: 20px" type="primary" @click="reset"
? ? ? >重置</a-button
? ? >
? ? <a-button type="primary" @click="end">暂停</a-button>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? flag: null,
? ? ? hour: 0,
? ? ? minute: 0,
? ? ? second: 0,
? ? ? time: "0",
? ? };
? },
? methods: {
? ? //开始计时
? ? start() {
? ? ? this.flag = setInterval(() => {
? ? ? ? this.second = this.second + 1;
? ? ? ? if (this.second >= 60) {
? ? ? ? ? this.second = 0;
? ? ? ? ? this.minute = this.minute + 1;
? ? ? ? }

? ? ? ? if (this.minute >= 60) {
? ? ? ? ? this.minute = 0;
? ? ? ? ? this.hour = this.hour + 1;
? ? ? ? }
? ? ? ? this.time =
? ? ? ? ? this.complZero(this.hour) +
? ? ? ? ? ":" +
? ? ? ? ? this.complZero(this.minute) +
? ? ? ? ? ":" +
? ? ? ? ? this.complZero(this.second);
? ? ? }, 1000);
? ? },
? ? //重新计时
? ? reset() {
? ? ? window.clearInterval(this.flag);
? ? ? this.hour = 0;
? ? ? this.minute = 0;
? ? ? this.second = 0;
? ? ? this.time = "0";
? ? },
? ? //暂停计时
? ? end() {
? ? ? this.flag = clearInterval(this.flag);
? ? },
? ? //补零
? ? complZero(n) {
? ? ? return n < 10 ? "0" + n : "" + n;
? ? },
? },
};
</script>
<style>
.timeContainer {
? font-size: 40px;
? margin-bottom: 10px;
}
</style>

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

查看更多关于vue实现点击按钮倒计时的详细内容...