倒计时它不适用于单击按钮
[英]Countdown It does not Work with click button
问题描述
I have a simple question.
我有一个简单的问题。 I want to make this code work with the Reset time button when the time is start again from 30 min delete the ( You are Ready! ) and start the time当时间从 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
I created a new function to reset the seconds and restart the timer and linked it to the button.我创建了一个新的 function 来重置秒数并重新启动计时器并将其链接到按钮。 I have also isolated at the start of the js code the variables that will count the seconds and hold the reference to the Interval.我还在 js 代码的开头隔离了将计算秒数并保存对间隔的引用的变量。
is this what you are looking for?这是你想要的？
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
Here create a separate function where after clicking - it disables the button, sets the timer, and changes button text.在这里创建一个单独的 function 在单击后-它会禁用按钮，设置计时器并更改按钮文本。
In secondPassed method, if seconds == 0 , it enables the button, so that you can start count down again.在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
Let's assume something quite basic, like the following:让我们假设一些非常基本的东西，如下所示：
<div>00:00</div>
<button>Reset</button>
Below is an approach you could take, fully-commented.以下是您可以采取的一种方法，已完全注释。
// 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);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.