Ändern Sie CSS mithilfe von Get Time Javascript

Question

Ich möchte CSS ändern, um Benutzerzeit zu erhalten. Wenn die Zeit jetzt von 06: 00-12: 00 Uhr ist, holen Sie sich den Morgenstil. Zeit 12: 00-18: 00 Uhr den Nachmittagsstil. Zeit 18: 00-06: 00 Holen Sie sich den Night Style. sonst bekommt man den Normal Style ... wie man das macht.

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

Sie setInterval() verwenden könnte die Zeit alle X Sekunden (Beispiel unter Kontrolle jede Sekunde) zu überprüfen:

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

Dann erstellen changeStyle() Funktion, die die Zeit überprüfen wird:

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(); 
} 

Oder unter Verwendung switch() Anweisung:

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(); 
} 

Hoffe, das hilft.