這是一個計時器。上面帶有秒表符號的按鈕是Set按鈕。我點擊它，輸入56分鐘，然后按下開始。不小心又點了設置鍵，當它提示我的時候，我點了取消，它只是隨機重置回00:00。為什么會出現這種情況，我該如何解決？我做錯什么了嗎？
class Timer {
constructor(root) {
root.innerHTML = Timer.getHTML();
this.el = {
minutes: root.querySelector(".timer__part--minutes"),
seconds: root.querySelector(".timer__part--seconds"),
control: root.querySelector(".timer__btn--control"),
reset: root.querySelector(".timer__btn--reset")
};
this.interval = null;
this.remainingSeconds = 0;
this.el.control.addEventListener("click", () => {
if (this.interval === null) {
this.start();
} else {
this.stop();
}
});
this.el.reset.addEventListener("click", () => {
const inputMinutes = prompt("Enter number of minutes. To add seconds, use a decimal.");
if (inputMinutes < 60) {
this.stop();
this.remainingSeconds = inputMinutes * 60;
this.updateInterfaceTime();
}
});
}
updateInterfaceTime() {
const minutes = Math.floor(this.remainingSeconds / 60);
const seconds = this.remainingSeconds % 60;
this.el.minutes.textContent = minutes.toString().padStart(2, "0");
this.el.seconds.textContent = seconds.toString().padStart(2, "0");
}
updateInterfaceControls() {
if (this.interval === null) {
this.el.control.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 5v14l11-7L8 5z"/></svg>`;
this.el.control.classList.add("timer__btn--start");
this.el.control.classList.remove("timer__btn--stop");
} else {
// Pause button
this.el.control.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>`;
this.el.control.classList.add("timer__btn--stop");
this.el.control.classList.remove("timer__btn--start");
}
}
start() {
if (this.remainingSeconds === 0) return;
this.interval = setInterval(() => {
this.remainingSeconds--;
this.updateInterfaceTime();
if (this.remainingSeconds === 0) {
this.stop();
}
}, 1000);
this.updateInterfaceControls();
}
stop() {
clearInterval(this.interval);
this.interval = null;
this.updateInterfaceControls();
}
static getHTML() {
return `
<span class="timer__part timer__part--minutes">00</span>
<span class="timer__part">:</span>
<span class="timer__part timer__part--seconds">00</span>
<!-- Play button -->
<button type="button" class="timer__btn timer__btn--control timer__btn--start">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 5v14l11-7L8 5z"/></svg>
</button>
<button type="button" class="timer__btn timer__btn--reset" title="Click to add time. To add seconds, use a decimal.">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="30px" viewBox="0 0 24 24" width="30px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M15,1H9v2h6V1z M11,14h2V8h-2V14z M19.03,7.39l1.42-1.42c-0.43-0.51-0.9-0.99-1.41-1.41l-1.42,1.42 C16.07,4.74,14.12,4,12,4c-4.97,0-9,4.03-9,9s4.02,9,9,9s9-4.03,9-9C21,10.88,20.26,8.93,19.03,7.39z M12,20c-3.87,0-7-3.13-7-7 s3.13-7,7-7s7,3.13,7,7S15.87,20,12,20z"/></g></g></g></svg>
</button>
`;
}
}
new Timer(
document.querySelector(".timer")
);body {
background: #dddddd;
margin: 24px;
}
.timer {
font-family: Roboto;
display: inline-block;
padding: 24px 32px;
border-radius: 30px;
background: white;
width: 250px;
height: 50px;
}
.timer__part {
font-size: 36px;
font-weight: bold;
}
.timer__btn {
width: 50px;
height: 50px;
margin-left: 16px;
border-radius: 50%;
border: none;
background: #8208e6;
cursor: pointer;
}
.timer__btn--start {
background: #00b84c;
}
.timer__btn--stop {
background: #ff0256;
}<div class="timer">
<center>
<div class="loader">
<!-- The loading symbol will be shown until the timer loads. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</center>
</div>當你在提示中點擊取消時，它將返回null，而在JS中當你選擇null & lt它將為真，因為當你比較null和number時，它將轉換為0(你可以在控制臺中運行Number(null)來檢查它)。如果您使用空字符串按OK，結果也是一樣的，因為當您將“”與number進行比較時，它將轉換為0(您可以在控制臺中運行Number(' ')來檢查它)
名為inputMinutes的變量可以是null、string和空字符串(請記住，在您的情況下，只有空格的字符串等于空字符串，因此您應該使用trim()刪除不必要的空格)。當您將此行中的inputMinutes與60進行比較時:
if (inputMinutes < 60) {
/*code*/
}您可以獲得4種變體:
null & lt60 ' & lt60 可以轉換成數字的字符串' & lt60 無法轉換為數字的字符串' & lt60 JS有自己比較不同類型的規則。因此，我建議您閱讀這些文章，全面了解JS比較什么以及如何比較:
你可以從javascript.info閱讀簡短版本
比較 如需全面了解，您可以閱讀MDN:
平等比較和相同。 小于運算符 大于運算符 小于或等于運算符 大于或等于運算符 等式運算符 不等式算子 嚴格相等運算符 嚴格不等式算子 我們繼續:)就像我上面說的當你用number JS比較某個東西的時候，試著把另一個類型轉換成number。因此，上面的變體將以這種方式進行比較(Number(x)會將輸入轉換為數字類型):
數字(空)& lt60 數字(“”)& lt60 Number('可以轉換為number的字符串')& lt60 Number('不能轉換為number的字符串')& lt60 下一步:
0 & lt60 -這是真的 0 & lt60 -這是真的 號碼& lt60 -答案取決于數字 NaN & lt60 -這是錯誤的 在3個變體中，我們得到了簡單的數字，所以它會像你預期的那樣工作 在4變量中，我們得到NaN，所以我們得到false，所以if塊將不被執行 我們對前兩個選項感興趣。當我們試圖用數字JS乘某物的時候，試著用同樣的規則把某物轉換成數字，所以你得到2個變量:
null * 60 = & gt0 * 60 -答案是0 ' * 60 = & gt0 * 60 -答案是0 因此，this.remainingSeconds將等于0，因此在updateInterfaceTime方法中，分和秒將等于0，因此您在計時器中得到00:00