https://javascriptjedi.com/bball-scoreboard/clock.mjs

1export default {
2	name: 'Clock',
3	props: {
4		running: false,
5		min: { type: Number, required: false, default: () => 0 },
6		sec: { type: Number, required: false, default: () => 0 },
7	},
8
9	emits: ['update:running', 'update:min', 'update:sec'],
10
11	data() {
12		return {
13			timerInterval: null
14		};
15	},
16
17	computed: {
18		isRunning: {
19			get() { return this.running; },
20			set(isRunning) { this.$emit('update:running', isRunning); }
21		},
22
23		minutes: {
24			get() { return this.min; },
25			set(newMin) { this.$emit('update:min', newMin); }
26		},
27
28		seconds: {
29			get() { return this.sec; },
30			set(newSec) { this.$emit('update:sec', newSec); }
31		},
32
33		timeIsUp() {
34			return this.minutes === 0 && this.seconds === 0;
35		},
36
37		minStr() {
38			return this.minutes < 0 ? '00' : this.minutes?.toString().padStart(2, 0) ?? '00';
39		},
40
41		secStr() {
42			return this.seconds < 0 ? '00' : this.seconds?.toString().padStart(2, 0) ?? '00';
43		},
44	},
45
46	methods: {
47		clearClockInterval() {
48			if (this.timerInterval) {
49				this.timerInterval = window.clearInterval(this.timerInterval);
50			}
51		},
52
53		startClockInterval() {
54			this.timerInterval = window.setInterval(this.updateTime, 1000);
55		},
56
57		async updateTime() {
58			let newSeconds = this.seconds;
59			let newMinutes = this.minutes;
60
61			--newSeconds;
62
63			if (newSeconds === -1) {
64				newSeconds = 0;
65				--newMinutes;
66
67				if (newMinutes === -1) {
68					newMinutes = 0;
69					newSeconds = 0;
70				} else {
71					newSeconds = 59;
72				}
73			}
74
75			this.minutes = newMinutes;
76			this.seconds = newSeconds;
77		}
78	},
79
80	watch: {
81		running(isRunning) {
82			this.clearClockInterval();
83
84			if (isRunning === true && (this.minutes > 0 || this.seconds > 0)) {
85				this.startClockInterval();
86			}
87		},
88
89		timeIsUp(theTimeIsUp) {
90			if(theTimeIsUp) {
91				this.isRunning = false;
92			}
93		}
94	},
95
96	template: `
97<div>
98	<span class="clock">{{ minStr }}:{{ secStr }}</span>
99</div>`
100};