gpt4 book ai didi

javascript - 如何使用 Javascript 禁用和启用按钮

转载 作者:太空宇宙 更新时间:2023-11-04 03:07:02 25 4
gpt4 key购买 nike

所以我一直在用 javascript 创建一个计时器。它从五分钟开始倒计时,并在特定的时间间隔内改变颜色。我创建了启动时间、停止时间和重置时间的按钮。但是,我注意到当我多次单击“开始”按钮时,它会增加减去的时间。所以按一次=“-1”,按2次=“-2”,按3次=“-3”,等等。我希望在单击按钮后禁用它。我已经想出了如何禁用它但是一旦它被禁用我需要在单击“重置”按钮后再次启用它。

因此,当有人最初按下“开始”按钮时,该按钮将被禁用。当用户按下“重置”时,“开始”按钮将再次启用。基本上只需要弄清楚如何将其重置为原始功能即可。

这是我的 Javascript 代码:

var seconds = 300;
var countdownTimer;
var colorChange;
colorChange = ['#7ed473', '#fff194', '#fa8283']
function secondPassed(){
var minutes = Math.floor(seconds/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
}
}

function changeColor(){
if (seconds <= 300 && seconds > 90) {
document.body.style.background = colorChange[0];
}
else if (seconds <= 90 && seconds > 30) {
document.body.style.background = colorChange[1];
}
else if(seconds <= 30 && seconds >= 0){
document.body.style.background = colorChange[2];
}
}

function countdown(start){
secondPassed();
if (seconds != 0) {
seconds --;
countdownTimer = setTimeout('countdown()', 1000);
changeColor();
start.disabled = true;

}
}

function cdpause() {
// pauses countdown
clearTimeout(countdownTimer);
};

function cdreset(startButton) {
// resets countdown
cdpause();
secondPassed();
};
#countdown {
font-size: 2em;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="newTicket2.0.css">
<script src = "Timer2.js">
</script>
</head>

<body onload = "cdreset()">
<span id="countdown" class="timer"></span>

<input type="button" value="Start" onclick="countdown(this)">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">
</body>
</html>

我尝试将 start.disabled = false 添加到 cdreset() 函数中,希望它只会重置按钮。但这没有用。尝试倒计时(开始);进入 cdreset() 并且这也不起作用。基本上撞墙了。重置一切不可能这么难。哈哈。任何帮助或指导将不胜感激。

最佳答案

cdreset() 不知道在哪里可以找到开始按钮。要解决该问题,请进行两个小更改。

首先,为您的开始按钮添加一个 ID:

<input type="button" value="Start" onclick="countdown(this)" id="start">

然后修改 cdreset() 以在启用按钮时使用该 ID:

function cdreset(startButton) {
// resets countdown
cdpause();
secondPassed();
document.getElementById('start').disabled = false;
};

Example fiddle

关于javascript - 如何使用 Javascript 禁用和启用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30266702/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com