所以我在 html 和 javascript 中制作了一個計時器，并將它顯示在一個按鈕上。我想這樣做，以便當時間值等于零時，它會提醒用戶。到目前為止，這是我的代碼。順便說一句，該代碼是計時器代碼的一部分。
const time2=
document.getElementById("countdown")
if(time2==0:00)
alert("You have ran out of time, better luck next time!")
uj5u.com熱心網友回復：
像這樣的東西？
let div = document.getElementById('count')
let countdown = 10
let stopper = setInterval(myTimer, 1000)
function myTimer() {
countdown--
div.innerHTML = countdown " seconds left"
if (countdown == 0) {
clearInterval(stopper)
}
}<div id='count'>10 seconds left</div>uj5u.com熱心網友回復：
這是使用class. 最重要的是setInterval()它可以讓你每x毫秒運行一個函式。
此計時器使用一個回呼函式onUpdate(seconds)，每次更新計時器時都會呼叫該函式，并提供剩余秒數作為引數。您當然可以對此進行擴展。
DOMContentLoaded在嘗試使用事件訪問 DOM 之前，還需要等待 HMTL 檔案加載完畢。
class Timer {
#interval;
#initial;
#seconds;
constructor(seconds, onUpdate) {
this.#initial = seconds;
this.#seconds = seconds;
this.onUpdate = onUpdate;
this.onUpdate(seconds);
}
start() {
this.#interval = setInterval(() => {
this.#seconds--;
if (this.#seconds === 0) this.stop();
this.onUpdate(this.#seconds);
}, 1000);
}
reset() {
this.stop();
this.#seconds = this.#initial;
this.onUpdate(this.#seconds);
}
stop() {
clearInterval(this.#interval);
this.onUpdate(this.#seconds);
}
}
// wait for HTML document to load
window.addEventListener("DOMContentLoaded", e => {
const startBtn = document.getElementById("start");
const stopBtn = document.getElementById("stop");
const resetBtn = document.getElementById("reset");
// create a timer and assign it seconds as well as a callback function that is called every second
const timerDiv = document.getElementById("countdown");
const timer = new Timer(5, (seconds) => {
// called every seconds with seconds to go as an argument
timerDiv.textContent = `${seconds}s to go`
})
// add event listeners to buttons
startBtn.addEventListener("click", () => timer.start());
stopBtn.addEventListener("click", () => timer.stop());
resetBtn.addEventListener("click", () => timer.reset());
})<div id="countdown"></div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>uj5u.com熱心網友回復：
您可以使用 setInterval() 創建一個計時器，并在達到某個值時觸發一些功能，在這種情況下，計時器被清除，我希望這會有所幫助：
const createTimer = (num) => {
const timer = setInterval(() => {
console.log(num)
num--;
if(num == 0) {
console.log("You have ran out of time, better luck next time!")
clearInterval(timer)
}
}, 1000)
}
createTimer(4)轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/466174.html
標籤：javascript html css 计时器 警报