当一个倒计时计时器被激活时改变背景颜色

Changing Background Color when a countdown timer is activated

本文关键字：激活 改变 颜色 背景 计时器 倒计时 一个      更新时间：2023-09-26

所以我想弄清楚如何改变一个页面的背景颜色后，一个倒计时计时器已被激活。例如，我下面的代码显示了一个5点计时器，在选择"开始"按钮后开始计数。当你按"停止"时，计时器明显停止，当你选择重置时，计时器重置为5:00并暂停。我把javascript代码从我在网上找到的两个代码(刚刚开始javascript)修补在一起，它的工作，但我现在正试图找出一种方法来改变基于倒计时定时器的时间页面的背景颜色。

所以在300秒到90秒之间颜色应该是"GREEN"在90-30之间，颜色应该变成"黄色"。30 - 0颜色改为"RED"

任何反馈，你可以给我我的代码和如何完成上述任务将非常感激。我刚刚开始编码，所以如果有一个正确的方式做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值，格式化为字符串。

示例:"red"，或"#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";
}

如果我看你的代码是正确的，你可能会想要调用changeColor()在倒计时()函数中，你是递减秒。

就Javascript技巧而言，我认为你的代码看起来非常适合初学者——你显然有编码经验。我唯一的建议是，与其在函数countdown()中使用空if语句后跟else语句，不如尝试使用not(!)操作符:

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

使用

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

相关文章：