我有一个用类和构造函数编写的纯 Javascript 计时器。但是有一个问题，计时器在单击“开始”按钮之前开始，我不明白为什么。只有在单击按钮后，我才需要启动计时器。同样在我的情况下，它不识别该startTimer功能。如果第二双眼睛指出出了什么问题，那就太好了。谢谢
HTML
<!DOCTYPE html>
<html>
<body>
<container>
<div class="btn-group">
<button id="startTimer" onclick="startTimer()">
Start
</button>
<button id="reset" onclick="resetTime()">
Reset
</button>
</div>
<div id="timer">
00:00
</div>
</container>
</body>
</html>
JS
class Timer {
constructor({seconds, minutes, timerSeconds, timerMinutes, interval, counter}) {
this.seconds = seconds;
this.minutes = minutes;
this.timerSeconds = timerSeconds;
this.timerMinutes = timerMinutes;
this.interval = interval;
this.counter = counter;
}
runTimer() {
this.seconds++;
//condition if seconds reach 60 - turn to 0 and add minutes by one
if (this.seconds / 60 === 1) {
this.seconds = 0;
this.minutes++;
}
//add zero to the value for seconds
if (this.seconds < 10) {
this.timerSeconds = "0" + this.seconds.toString();
} else {
this.timerSeconds = this.seconds;
}
//add zero to the value for minutes
if (this.minutes < 10) {
this.timerMinutes = "0" + this.minutes.toString();
} else {
this.timerMinutes = this.minutes;
}
document.getElementById("timer").innerHTML = this.timerMinutes + ':' + this.timerSeconds;
}
startTimer() {
if (this.counter === false) {
this.interval = window.setInterval(() => this.runTimer(),1000);
document.getElementById("startTimer").innerHTML = "Stop";
this.counter = true;
} else {
window.clearInterval(this.interval);
document.getElementById("startTimer").innerHTML = "Start";
this.counter = false;
}
}
/* resetTime() {
window.clearInterval(this.interval);
this.seconds = 0;
this.minutes = 0;
document.getElementById("timer").innerHTML = "00:00";
document.getElementById("startTimer").innerHTML = "Start"
} */
}
const timer = new Timer( {
seconds: 0,
minutes: 0,
timerSeconds: 0,
timerMinutes: 0,
interval:null,
counter: false,
});
timer.startTimer();