当计时器分钟数达到某个目标时,如何更改页面的背景颜色?

我目前正在制作一个计时器/秒表,如果计时器按5分钟,则试图将背景颜色更改为例如绿色,当其按10分钟时,我希望将其更改为蓝色,等等。

这是代码

let seconds = 0;
let minutes = 0;
let hours = 0;

let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;


let interval = null;

let status = "stopped";

//Stopwatch function
function stopWatch(){

    seconds++;

    if(seconds / 60 === 1){
        seconds = 0;
        minutes++;

        if(minutes / 60 === 1){
            minutes = 0;
            hours++;
        }
    }

    if(seconds < 10){
        displaySeconds = "0" + seconds.toString();
    }
    else{
        displaySeconds = seconds;
    }

    if(minutes < 10){
        displayMinutes = "0" + minutes.toString();
    }
    else{
        displayMinutes = minutes;
    }
    if(hours < 10){
        displayHours = "0" + hours.toString();
    }
    else{
        displayHours = hours;
    }

    document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}


function startStop(){
    if(status === "stopped"){
        interval = window.setInterval(stopWatch, 1000);
        document.getElementById("startStop").innerHTML = "Stop";
        status = "started";

    }
    else{
        window.clearInterval(interval);
        document.getElementById("startStop").innerHTML = "Start";
        status = "stopped";
    }
}

//Function to reset stopwatch
function reset(){
    window.clearInterval(interval);
    seconds = 0;
    minutes = 0;
    hours = 0;
    document.getElementById("display").innerHTML = "00:00:00";
    document.getElementById("startStop").innerHTML = "Start";

}

function changeColor(){
    if (seconds === 300){
        document.change.bgColor = "green";
    }
    else if (seconds === 600){
        document.change.bgColor = "yellow";
    }
    else if (seconds === 900){
        document.change.bgColor = "red";
    }
}

如您所见,我已经添加了更改颜色的功能,但是不幸的是,没有进行任何操作,如果您有任何想法,我试图找出可能的错误,请告诉我。

评论
  • Donne
    Donne 回复

    Try using document.body.style.backgroundColor instead of document.change.bgColor. Here is your revised code:

    let seconds = 0;
    let minutes = 0;
    let hours = 0;
    
    let displaySeconds = 0;
    let displayMinutes = 0;
    let displayHours = 0;
    
    
    let interval = null;
    
    let status = "stopped";
    
    //Stopwatch function
    function stopWatch(){
    
        seconds++;
    
        if(seconds / 60 === 1){
            seconds = 0;
            minutes++;
    
            if(minutes / 60 === 1){
                minutes = 0;
                hours++;
            }
        }
    
        if(seconds < 10){
            displaySeconds = "0" + seconds.toString();
        }
        else{
            displaySeconds = seconds;
        }
    
        if(minutes < 10){
            displayMinutes = "0" + minutes.toString();
        }
        else{
            displayMinutes = minutes;
        }
        if(hours < 10){
            displayHours = "0" + hours.toString();
        }
        else{
            displayHours = hours;
        }
    
        document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
    }
    
    
    function startStop(){
        if(status === "stopped"){
            interval = window.setInterval(stopWatch, 1000);
            document.getElementById("startStop").innerHTML = "Stop";
            status = "started";
    
        }
        else{
            window.clearInterval(interval);
            document.getElementById("startStop").innerHTML = "Start";
            status = "stopped";
        }
    }
    
    //Function to reset stopwatch
    function reset(){
        window.clearInterval(interval);
        seconds = 0;
        minutes = 0;
        hours = 0;
        document.getElementById("display").innerHTML = "00:00:00";
        document.getElementById("startStop").innerHTML = "Start";
    
    }
    
    function changeColor(){
        if (seconds === 300){
            document.change.bgColor = "green";
        }
        else if (seconds === 600){
            document.change.bgColor = "yellow";
        }
        else if (seconds === 900){
            document.change.bgColor = "red";
        }
    }
    
  • 淡夏之
    淡夏之 回复
    let seconds = 0;
    let minutes = 0;
    let hours = 0;
    
    let displaySeconds = 0;
    let displayMinutes = 0;
    let displayHours = 0;
    
    
    let interval = null;
    
    let status = "stopped";
    
    //Stopwatch function
    function stopWatch(){
    
        seconds++;
    
        if(seconds / 60 === 1){
            seconds = 0;
            minutes++;
    
            if(minutes / 60 === 1){
                minutes = 0;
                hours++;
            }
        }
    
        if(seconds < 10){
            displaySeconds = "0" + seconds.toString();
        }
        else{
            displaySeconds = seconds;
        }
    
        if(minutes < 10){
            displayMinutes = "0" + minutes.toString();
        }
        else{
            displayMinutes = minutes;
        }
        if(hours < 10){
            displayHours = "0" + hours.toString();
        }
        else{
            displayHours = hours;
        }
    
        document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
    }
    
    
    function startStop(){
        if(status === "stopped"){
            interval = window.setInterval(stopWatch, 10);
            document.getElementById("startStop").innerHTML = "Stop";
            status = "started";
    
        }
        else{
            window.clearInterval(interval);
            document.getElementById("startStop").innerHTML = "Start";
            status = "stopped";
        }
    }
    
    //Function to reset stopwatch
    function reset(){
        window.clearInterval(interval);
        seconds = 0;
        minutes = 0;
        hours = 0;
        document.getElementById("display").innerHTML = "00:00:00";
        document.getElementById("startStop").innerHTML = "Start";
    
    }
    
    function changeColor(){
        if (seconds === 300){
            document.body.style.backgroundColor = "green";
        }
        else if (seconds === 600){
            document.body.style.backgroundColor = "yellow";
        }
        else if (seconds === 900){
            document.body.style.backgroundColor = "red";
        }
    }
    

    我只是尝试了这个建议,页面仍然没有改变任何颜色

  • Alex55
    Alex55 回复

    Try replacing document.change.bgColor with document.body.style.backgroundColor.