在倒数计时器激活时更改背景颜色

So I'm trying to figure out how to change the background color of a page after a countdown timer has been activated. For example I have code below that displays a 5:00 timer that begins counting after selecting the "Start" Button. When you press "Stop" the timer obviously stops, and when you select reset the timer resets to 5:00 and pauses. I patched the javascript code together from two codes I found online (Just now beginning javascript) and it works however I am now trying to figure out a way to change the background color of the page based on the time of the countdown timer.

所以我试图弄清楚如何在倒数计时器被激活后更改页面的背景颜色。例如，我有下面的代码显示一个5:00计时器，它在选择“开始”按钮后开始计数。当您按“停止”时，计时器显然会停止，当您选择重置时，计时器将重置为5:00并暂停。我从我在网上发现的两个代码（刚刚开始使用javascript）修补了javascript代码，但是它现在正在尝试找出一种方法来根据倒数计时器的时间更改页面的背景颜色。

So between 300 seconds and 90 seconds the color should be "GREEN" Between 90-30 the color should change to "YELLOW" 30 - 0 the color should change to "RED"

因此，在300秒到90秒之间，颜色应为“绿色”。在90-30之间颜色应更改为“黄色”30 - 0颜色应更改为“红色”

Any feedback you guys can give me on my code and how to accomplish the task above would be greatly appreciated. Im just starting out coding so if there is a proper way of doing javascript let me know.

您可以通过我的代码向我提供任何反馈以及如何完成上述任务，我们将不胜感激。我刚刚开始编码，所以如果有一个正确的方式做javascript让我知道。

Here is the code for my Countdown timer (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>

I am thinking that in order to change the background color the code should be something like this:

我在想，为了改变背景颜色，代码应该是这样的：

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

However, I have not been able to figure out how to change anything without messing up the original product. The color change should be linked to the button click. So once the "start" button is pressed the color should change and continue to change according to the parameters above. Once the counter has reached zero it should stay red until the reset button has been pressed. Once the "reset" button is pressed the color goes back to green and goes to yellow, then red. So it should work in tandem with the timer I just cant seem to get it to work.

但是，我没有弄清楚如何在不弄乱原始产品的情况下改变任何东西。颜色更改应链接到按钮单击。因此，一旦按下“开始”按钮，颜色应该改变并继续根据上述参数改变。一旦计数器达到零，它应该保持红色，直到按下复位按钮。按下“重置”按钮后，颜色会变回绿色并变为黄色，然后变为红色。所以它应该与计时器协同工作我似乎无法让它工作。

2 个解决方案

#1

To change the background of the body of your page, use the following line:

要更改页面正文的背景，请使用以下行：

document.body.style.background = colorString;

If you have a div or some other element that takes up the entire background, make sure the div has a unique id and use the following line:

如果您有div或其他元素占用整个背景，请确保div具有唯一ID并使用以下行：

document.getElementById("theIdOfYourElement").style.background = colorString;

where "colorString" is the name of the color, or hex/rgb value you want the background to be, formatted as a string.

其中“colorString”是颜色的名称，或者您希望背景的十六进制/ rgb值，格式为字符串。

Ex: "red", or "#FF000", or "rgb(255,0,0)"

例如：“红色”，或“＃FF000”，或“rgb（255,0,0）”

Your function changeColor() looks really good, but I would probably use an interval argument in each if statement, like this:

你的函数changeColor（）看起来非常好，但我可能会在每个if语句中使用interval参数，如下所示：

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

If I'm looking at your code correctly, you would probably want to call changeColor() in the function countdown() where you are decrementing the seconds.

如果我正确地查看你的代码，你可能想在函数countdown（）中调用changeColor（），你在那里递减秒。

As far as Javascript tips, I think your code looks really good for a beginner - you obviously have coding experience. The only suggestion I have would be that instead of using an empty if statement followed by an else in your function countdown(), try something like this using the not (!) operator:

就Javascript提示而言，我认为你的代码看起来对初学者来说非常好 - 你显然有编码经验。我唯一的建议是，不要在函数倒计时（）中使用一个空的if语句后面跟一个else，尝试使用not（！）运算符这样的东西：

        if (seconds != 0) { 
        seconds--;
        t = setTimeout("countdown()", 1000);
        changeColor();
        }

#2

to change a color of something use

改变使用的颜色

document.getElementById('[your element id]').style.background="red";

document.getElementById（'[your element id]'）。style.background =“red”;

#1