Question

所以我试图找出在倒数计时器被激活后如何更改页面的背景颜色。例如，我有下面的代码显示一个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";
    }
}

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

Answer 1

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

document.body.style.background = colorString;

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

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

其中“colorString”是您想要背景的颜色名称或hex / rgb值，格式为字符串。

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

你的函数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";
}

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

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

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

Answer 2

改变使用的颜色

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

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

2 个答案: