倒计时它不适用于单击按钮
[英]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.