ユーザ現在時刻でCSSを変更するJavaScript

Question

現在の時刻を使用して変更CSSを追加します。 これはIlustrationのコードです。

var today = new Date(); 
var hourNow = today.getHours(); 
var style; //add css// 

    if (hourNow > 0) { //hour 00:00 - 12:00 the css// 
     document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff"; 
     document.getElementsByTagName('BODY')[0].style.color= "#505050"; } 

    else if (hourNow > 12) { //hour 120:00 - 18:00 the css// 
     document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro"; 
     document.getElementsByTagName('BODY')[0].style.color= "black"; } 

    else if (hourNow > 18) { //hour 18:00 - 00:00 the css// 
     document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b"; 
     document.getElementsByTagName('BODY')[0].style.color= "#fff"; } 

    else { 
     document.getElementsByTagName('BODY')[0].style.backgroundColor = "white"; 
     document.getElementsByTagName('BODY')[0].style.color= "black";} 

は可能ですか？私はJavaScriptで新しいです。

Answer 1

それが正確に0でない限り、あなたのコードは常に、最初の条件が成功すると、その場合にはそれが「デフォルト」をかかります。この場合

var today = new Date(); 
var hourNow = today.getHours(); 
var style; //add css// 

if (hourNow >= 18) { //hour 18:00 - 00:00 the css// 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b"; 
    document.getElementsByTagName('BODY')[0].style.color= "#fff"; } 

else if (hourNow >= 12) { //hour 120:00 - 18:00 the css// 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro"; 
    document.getElementsByTagName('BODY')[0].style.color= "black"; } 

else if (hourNow >= 0) { //hour 00:00 - 12:00 the css// 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff"; 
    document.getElementsByTagName('BODY')[0].style.color= "#505050"; } 

else { 
    document.getElementsByTagName('BODY')[0].style.backgroundColor = "white"; 
    document.getElementsByTagName('BODY')[0].style.color= "black";} 

Answer 2

私は自分自身を繰り返すことは少なく、else（逆のものをリストする）を使用しますが、根本的には大丈夫だったはずです。 、

var today = new Date(); 
 
var hourNow = today.getHours(); 
 
var style; 
 

 
if (hourNow > 18) { 
 
    background = "#1b1b1b"; 
 
    color = "#fff"; 
 
} else if (hourNow > 12) { 
 
    background = "gainsboro"; 
 
    color = "black"; 
 
} else if (hourNow > 0) { 
 
    background = "#fff"; 
 
    color = "#505050"; 
 
} 
 
document.body.style.backgroundColor = background; 
 
document.body.style.color = color;

This is the document body.

...またはより良い使用をCSSでスタイル情報を入れて、追加/クラスを削除します。私は、直接風の操作をしなければならなかった場合、私はこのような何かをしたいです。

var today = new Date(); 
 
var hourNow = today.getHours(); 
 
var style; 
 
var cls; 
 

 
if (hourNow > 18) { 
 
    cls = "evening"; 
 
} else if (hourNow > 12) { 
 
    cls = "afternoon"; 
 
} else if (hourNow > 0) { 
 
    cls = "morning"; 
 
} 
 
document.body.classList.remove("morning", "afternoon", "evening"); 
 
document.body.classList.add(cls);

.morning { 
 
    background-color: #fff; 
 
    color: #505050; 
 
} 
 
.afternoon { 
 
    background-color: gainsboro; 
 
    color: black; 
 
} 
 
.evening { 
 
    background-color: #1b1b1b; 
 
    color: #fff; 
 
}

This is the document body.

Answer 3

を、私はswitchステートメントを使用します。 は、私はそれを使用して、それを修正しました。また、スタイルを設定する代わりに、クラス名を変更する方が効率的かもしれません。ただ、FYI、 `document.getElementsByTagName（ 'BODY'）は[0]`はるかに簡単にdocument.body` `のように書くことができ

var today = new Date(); 
 
var hourNow = today.getHours(); 
 

 
switch(true) { 
 
    case (hourNow > 0 && hourNow <= 12): 
 
     document.body.className = "morning"; 
 
     break; 
 
    case (hourNow > 12 && hourNow <= 18): 
 
     document.body.className = "afternoon"; 
 
     break; 
 
    default: 
 
     document.body.className = "evening"; 
 
     break; 
 
} 
 

.morning { 
 
    background-color: #fff; 
 
    color: #505050; 
 
} 
 

 
.afternoon { 
 
    background-color: gainsboro; 
 
    color: black; 
 
} 
 

 
.evening { 
 
    background-color: #1b1b1b; 
 
    color: #fff; 
 
}