Question

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

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

这是我的Javascript代码：

[object Object]

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;
}

我尝试在cdreset（）函数中添加一个start.disabled = false，希望它只是重置按钮。但那没用。尝试倒计时（开始）;进入cdreset（），但也没有用。基本上撞墙了。重置一切都很难。大声笑。任何帮助或指导将不胜感激。

Answer 1

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

＆＃13;

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;
}

＆＃13;

#countdown {
font-size: 2em;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

快速谷歌搜索显示：

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

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

3 个答案: