所以我想弄清楚如何在激活倒数计时器后更改页面的背景颜色。例如，下面的代码显示了一个 5:00 计时器，该计时器在选择“开始”按钮后开始计时。当您按下“停止”时，计时器显然会停止，而当您选择重置时，计时器会重置为 5:00 并暂停。我从我在网上找到的两个代码(刚刚开始使用 javascript)将 javascript 代码拼凑在一起，它可以工作，但是我现在正试图找出一种方法来根据倒数计时器的时间更改页面的背景颜色。
所以在 300 秒到 90 秒之间，颜色应该是“绿色” 在 90-30 之间，颜色应变为“黄色” 30 - 0 颜色应更改为“红色”
如果你们能就我的代码以及如何完成上述任务提供任何反馈，我们将不胜感激。我刚开始编码，所以如果有正确的 javascript 方法，请告诉我。
这是我的倒数计时器 (javascript) 的代码:
var seconds = 300;
var t;
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;
}
function countdown() {
// starts countdown
secondPassed();
if (seconds == 0) {} else {
seconds--;
t = setTimeout("countdown()", 1000);
}
}
function cdpause() {
// pauses countdown
clearTimeout(t);
};
function cdreset() {
// resets countdown
cdpause();
secondPassed();
};
@charset "UTF-8";
/* CSS Document*/
#countdown {
font-size: 2em;
background-color: white;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="newTicket2.0.css">
<script src="Timer.js">
</script>
</head>
<body onload="cdreset()">
<span id="countdown" class="timer"></span>
<input type="button" value="Start" onclick="countdown()">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">
</body>
</html>我在想，为了改变背景颜色，代码应该是这样的:
function changeColor() {
if (seconds == 300) {
document.change.bgColor = "green";
} else if (seconds == 90) {
document.change.bgColor = "yellow";
} else(seconds == 30) {
`enter code here`
document.change.bgColor = "red";
}
}
但是，我一直无法弄清楚如何在不弄乱原始产品的情况下进行任何更改。颜色变化应该与按钮点击相关联。因此，一旦按下“开始”按钮，颜色就会发生变化，并根据上述参数继续变化。一旦计数器达到零，它应该保持红色，直到按下重置按钮。一旦按下“重置”按钮，颜色就会变回绿色，然后变黄，然后变红。所以它应该与计时器协同工作，但我似乎无法让它工作。
最佳答案
要更改页面正文的背景，请使用以下行:
document.body.style.background = colorString;
如果您有一个 div 或其他占据整个背景的元素，请确保该 div 具有唯一 ID 并使用以下行:
document.getElementById("theIdOfYourElement").style.background = colorString;
其中“colorString”是颜色的名称，或者您希望背景成为的十六进制/rgb 值，格式为字符串。
例如:“红色”或“#FF000”或“rgb(255,0,0)”
您的函数 changeColor() 看起来非常好，但我可能会在每个 if 语句中使用一个区间参数，如下所示:
function changeColor() {
if (seconds <= 300 && seconds > 90) {
document.body.style.background = "green";
}
else if (seconds <= 90 && seconds > 30) {
document.body.style.background = "yellow";
}
else {
document.body.style.background = "red";
}
如果我没看错你的代码，你可能想在递减秒数的函数 countdown() 中调用 changeColor()。
就 Javascript 提示而言，我认为您的代码看起来非常适合初学者 - 您显然有编码经验。我唯一的建议是不要在函数 countdown() 中使用一个空的 if 语句后跟一个 else，而是使用 not (!) 运算符尝试这样的事情:
if (seconds != 0) {
seconds--;
t = setTimeout("countdown()", 1000);
changeColor();
}
关于javascript - 激活倒数计时器时更改背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30247634/