使用获取时间 Javascript 更改样式 CSS

Question

我想通过获取用户时间来更改 css。如果现在的时间是 06:00-12:00，则获取 Morning 样式。时间 12:00-18:00 获得下午风格。时间 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();
}

希望对您有所帮助。

使用获取时间 Javascript 更改样式 CSS

Change Style CSS using Get Time Javascript

javascript

css

time

styles