javascript - 使用 Get Time Javascript 更改样式 CSS

Question

我想通过获取用户时间来更改 css。如果现在的时间是 06:00-12:00，则获取 Morning 样式。时间 12:00-18:00 获得 Afternoon Style。时间 18:00-06:00 获得夜间风格。否则获得普通样式...如何做到这一点。

function morning() {
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fcfcfc";
    document.getElementsByTagName('BODY')[0].style.color = "#505050";
}

function afternoon() {
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro";
    document.getElementsByTagName('BODY')[0].style.color = "black";
}

function night() {
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b";
    document.getElementsByTagName('BODY')[0].style.color = "#fff";
}

function normal() {
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff";
    document.getElementsByTagName('BODY')[0].style.color = "#1b1b1b";
}

Answer 1

您可以使用 setInterval() 每 X 秒检查一次时间(下面的示例每秒检查一次):

setInterval(changeStyle, 1000); //1000 ms = 1 second

然后创建将检查时间的 changeStyle() 函数:

function changeStyle() {
    var date = new Date();
    var current_time = d.getHours(); //Get Hour between 0 and 23

    if( current_time >= 6 && current_time <= 12 )
        morning();
    else if( current_time >= 12 && current_time <= 18 )
        afternoon();
    else if( current_time >= 12 && current_time <= 18 )
        night();
    else
        normal();
}

或使用 switch() 声明:

switch(true) {
    case (current_time >= 6 && current_time <= 12):
        morning();
    break;
    case ( current_time >= 12 && current_time <= 18 ):
        afternoon();
    break;
    case if( current_time >= 12 && current_time <= 18 ):
        night();
    break;
    default:
        normal();
}

希望这对您有所帮助。