用用戶當前時間更改CSS JavaScript

我想用當前時間添加更改CSS。這是我想要的代碼。用用戶當前時間更改CSS JavaScript

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 ..

來源

2016-07-07 Richard Hammond

僅供參考，'document.getElementsByTagName（ '主體'）[0]'可以更簡單地寫成'document.body'。 –

你試過了嗎？對我來說似乎很合理。迴應我上面的評論。 –

你明顯可以在自己的代碼中使用任何想要的支撐風格，但是在發佈其他人閱讀的代碼時，請使用*隱約*標準和可讀的內容。隱藏塊的最後一行末尾的'}'不是標準的或可讀的（或可維護的）。 –

您的代碼將總是成功的首要條件，除非是恰好爲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";}

來源

2016-07-07 14:58:18

很高興幫助:) –

我會少做我自己的重複和使用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.

來源

2016-07-07 14:55:05

您通常不希望在if語句中使用太多條件。這就是爲什麼我提出了一個switch語句 –

@RichardHamilton：以上在if中沒有太多條件。開關對於數值範圍並不是一個好的選擇。（它可能*，但通常不會達到什麼效果。） –

...實際上，使用'switch'就是'if/else'的另一個名字和一個不太知名的語法。 –

在這種情況下，我會用switch聲明。此外，而不是設置樣式，更改類名可能更有效。測試這一點

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

來源

2016-07-07 14:59:13

在任何人給理查德一個難的時間之前：是的，JavaScript的'switch'確實可以讓你這樣做。真。 :-) –

用用戶當前時間更改CSS JavaScript

回答

相關問題