使用獲取時間更改樣式CSS Javascript

我想通過獲取用戶時間更改css。如果現在的時間是06：00-12：00，請使用Morning風格。時間12：00-18：00獲得下午風格。時間18：00-06：00獲得夜晚風格。否則得到正常風格...如何做到這一點。使用獲取時間更改樣式CSS Javascript

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"; 
}

來源

2016-07-07 Drew Walk

可能的重複[在JavaScript中獲取當前日期和時間]（http://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript） –

你可以使用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(); 
}

希望這會有所幫助。

來源

2016-07-07 13:33:01

使用獲取時間更改樣式CSS Javascript

回答

相關問題