时间戳

首页 > 解决方案 > 当计时器分钟达到某个目标时，我如何更改页面的背景颜色？

javascript - 当计时器分钟达到某个目标时，我如何更改页面的背景颜色？

问题描述

我目前正在制作一个计时器/秒表，如果计时器达到 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";
    }
}

如您所见，我添加了更改颜色的功能，但是当我尝试它时，不幸的是，什么也没发生，我正在尝试找出可能的错误，如果您有任何想法，请告诉我。

标签： javascripthtml

解决方案

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

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

如果达到 60，您已将秒数设置为 0。因此，它永远不会达到 300。也document.change.bgColor应该是document.body.style.backgroundColor

我希望这能解决

推荐阅读