<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: "00:00:00",
? ? };
? },
? 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 = "00:00:00";
? ? },
? ? //暫停計時
? ? end() {
? ? ? this.flag = clearInterval(this.flag);
? ? },
? ? //補零
? ? complZero(n) {
? ? ? return n < 10 ? "0" + n : "" + n;
? ? },
? },
};
</script>
<style>
.timeContainer {
? font-size: 40px;
? margin-bottom: 10px;
}
</style>