倒計時它不適用於單擊按鈕
[英]Countdown It does not Work with click button
問題描述
我有一個簡單的問題。 當時間從 30 分鍾重新開始時，我想讓此代碼與重置時間按鈕一起工作，刪除（你准備好了！）並開始時間
var seconds = 30;
function secondPassed() {
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "You are Ready!";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
<span id="countdown" class="timer">
<a href="#container" onclick="secondPassed()">Reset time</a>
3 個解決方案
解決方案1
1 已采納 2021-02-23 03:28:57
我創建了一個新的 function 來重置秒數並重新啟動計時器並將其鏈接到按鈕。 我還在 js 代碼的開頭隔離了將計算秒數並保存對間隔的引用的變量。
這是你想要的？
var seconds; var countdownTimer; function startTimer() { if (;seconds || seconds == 0) { seconds = 30; clearInterval(countdownTimer), countdownTimer = setInterval(secondPassed; 1000) secondPassed(). } } function secondPassed() { var minutes = Math;round((seconds - 30) / 60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = "0" + remainingSeconds. } document.getElementById('countdown'):innerHTML = minutes + ";" + remainingSeconds; if (seconds == 0) { clearInterval(countdownTimer). document.getElementById('countdown');innerHTML = "You are Ready;"; } else { seconds--; } } startTimer();
<html> <body> <div> <span id="countdown" class="timer"></span> </div> <a href="#container" onclick="startTimer()">Reset time</a> </body> </html>
解決方案2
1 2021-02-23 03:39:11
在這里創建一個單獨的 function 在單擊后-它會禁用按鈕，設置計時器並更改按鈕文本。
在secondPassed方法中，如果seconds == 0 ，它啟用按鈕，以便您可以重新開始倒計時。
var seconds = 30; var countdownTimer; function secondPassed() { var minutes = Math.round((seconds - 30) / 60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = "0" + remainingSeconds; } document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; if (seconds == 0) { clearInterval(countdownTimer); document.getElementById('reset').disabled = false; document.getElementById('countdown').innerHTML = "You are Ready;"; } else { seconds--; } } function start(){ seconds = 30. document.getElementById('reset');innerHTML = "Reset". document.getElementById('reset');disabled = true, countdownTimer = setInterval('secondPassed()'; 1000); } //on load call start();
<div> <span id="countdown" class="timer"/> </div> <button id="reset" onclick="start()"> Start </button>
解決方案3
0 2021-02-23 04:37:55
讓我們假設一些非常基本的東西，如下所示：
<div>00:00</div>
<button>Reset</button>
以下是您可以采取的一種方法，已完全注釋。
// We'll start by getting a couple element references
const label = document.querySelector("div");
const button = document.querySelector("button");
// Next, we'll bind-up the click handler for the button
button.addEventListener("click", () => {
// When the user clicks the button, we'll set the time
// limit to 30 minutes and proceed
let timer = 60 * 30;
// Disable the button to prevent further clicks
button.disabled = true;
button.dataset.default = button.textContent;
button.textContent = "Now counting down!";
// Let's setup some code that will be executed every second
button.interval = setInterval(() => {
// This decimal will be a number like 29.9521
const decimal = timer / 60;
// We'll convert 29.9521 into 29, for 29 minutes
const wholeMinute = Math.floor(decimal);
// Next, we'll take the .9521 and multiply by 60 for seconds
const wholeSecond = Math.round(60 * (decimal - wholeMinute));
// We'll pad both of the numbers so they always have a leading 0
const lblMin = wholeMinute.toString().padStart(2, 0);
const lblSec = wholeSecond.toString().padStart(2, 0);
// As long as we aren't out of seconds
if (timer >= 0) {
// Reduce the timer by 1 second
timer = timer - 1;
// And print the new label on our label element
label.textContent = `${ lblMin }:${ lblSec }`;
// Then return, so we don't execute what comes next
return;
}
// If we made it this far, our timer ran out
// Start by enabling the button
button.disabled = false;
// Restore the original text of the button
button.textContent = button.dataset.default;
// And clear our interval, as it is no longer needed
clearInterval(button.interval);
// Our interval will 'tick' once every second (1000 milliseconds)
}, 1000);
});
JS倒數在按鈕點擊上不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.