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

【问题标题】：Changing Background Color when a countdown timer is activated激活倒数计时器时更改背景颜色
【发布时间】：2015-05-14 21:25:48
【问题描述】：

所以我想弄清楚在激活倒数计时器后如何更改页面的背景颜色。例如，我在下面的代码中显示了一个 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.backgroundColor = 'red'
我已经对代码进行了更改，但是当我将 changeColor() 函数添加到 countdown() 函数时，它似乎完全删除了计时器并且没有任何效果。所以我想知道这是否是计时器代码的问题。我只需要弄清楚为什么它不起作用。但至少我知道我在正确的球场上哈哈。

标签： javascript jquery html css timer

【解决方案1】：

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

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

【讨论】：

所以似乎每次我尝试放入 changeColor() 函数时，倒数计时器都会消失。一旦我删除了 changeColor 功能，一切都会像冰一样顺畅。所以我想知道是否可能需要重写实际的倒数计时器代码以使其与 changeColor() 函数一起使用。你写的东西正是我所想的，它似乎不想使用按钮或计时器。我想我会尝试自己重写倒数计时器。我将我在网上找到的两个代码拼凑在一起。但至少我知道我在正确的轨道上。
如果你愿意，你可以继续创建一个fiddle，我可以看看。如果不尝试实时版本，就很难准确猜测出问题所在。
另外，如果此答案适合您，请单击投票按钮旁边的复选标记以接受答案。它提高了我的声誉，并帮助其他人在未来寻找这个问题的答案。
所以我刚刚创建了小提琴，但由于某种原因它根本没有显示数字。我使用相同的代码并使用我的浏览器，它显示正常。不确定是什么问题。但请查看此处的代码。 link
嘿 - 我在让你的代码工作时遇到了一些麻烦，所以我从 previous SO post 改编了一些代码，我认为你可能也是从那里开始的。你可以在这个fiddle 中看到我的解决方案。我认为它遵循您的大部分预期行为，您可以根据需要从那里适应

【解决方案2】：

改变某物的颜色使用

document.getElementById('[你的元素 id]').style.background="red";

【讨论】：