如何使用 Javascript 禁用和启用按钮答案

【问题标题】：How to Disable and Enable a button with Javascript如何使用 Javascript 禁用和启用按钮
【发布时间】：2015-05-16 03:05:06
【问题描述】：

所以我一直在用 javascript 创建一个计时器。它从五分钟开始倒计时，并在一定的时间间隔内改变颜色。我创建了开始时间、停止时间和重置时间的按钮。但是，我注意到当我多次单击“开始”按钮时，它会增加减去的时间量。所以一按=“-1”，二按=“-2”，三按=“-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>

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

【问题讨论】：

移除禁用属性 $('#start').removeAttr('disabled');

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

哇...嗯，这非常容易。哈哈。感谢您的帮助。

【解决方案2】：

您可以为按钮分配 ID 并使用 getElementById() 访问它们：

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;
	} else {
        clearTimeout(countdownTimer);
    }
}

function cdpause() {
        // pauses countdown
        clearTimeout(countdownTimer);
}
    
function cdreset() {
        // resets countdown
        cdpause();
        secondPassed();
        document.getElementById("start").disabled = false;
}

#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" id="start" value="Start" onclick="countdown(this)">
<input type="button" id="stop" value="Stop" onclick="cdpause()">
<input type="button" id="reset" value="Reset" onclick="cdreset(seconds = 300)">
</body>
</html>

【讨论】：

谢谢一群老兄，这真的很有帮助，没想到这么简单。大声笑

【解决方案3】：

快速谷歌搜索显示：

document.getElementById("myBtn").disabled = true;

【讨论】：

正确，我在谷歌上搜索这样的东西很糟糕。我一直在四处寻找一分钟，但我很感激。
没问题，伙计，我不介意人们搜索“显而易见”的东西，我不会派 300 万人投票给你，让你像大多数人在 SO 上所做的那样被禁止