Verwenden Sie JS, um den Effekt zu erzielen, dass sich der Seitenhintergrund im Laufe der Zeit ändert

In diesem Artikel werden hauptsächlich relevante Informationen zum JS-Code vorgestellt, um den Effekt der zeitabhängigen Änderung des Seitenhintergrunds zu erzielen. Er ist sehr gut und hat Referenzwert.

1 .Übersicht

Um den Anzeigeeffekt der Seite zu bereichern, wird die Seite manchmal in einen Stil umgewandelt, der den Seitenhintergrund entsprechend ändert Zeit, damit der Betrachter diese Website nicht spürt. Wenn Sie es satt haben, werden Sie auch das Gefühl haben, dass die Website sehr innovativ ist. In diesem Beispiel wird die Stunde der aktuellen Systemzeit über die getHours()-Methode des Date-Objekts abgerufen und dann das Hintergrundbild der Seite entsprechend verschiedenen Zeiträumen geändert.

2. Technische Punkte

Verwenden Sie hauptsächlichdas getHours( des Date-Objekts in JavaScript )-Methode, um die Stunde der aktuellen Systemzeit abzurufen und dann zu bestimmen, ob die aktuelle Stunde mit dem angegebenen Zeitraum innerhalb eines bestimmten Zeitraums übereinstimmt. Wenn sie übereinstimmt, verwenden Sie die write()-Methode des Dokuments Objekt, um ein Bild auf der Seite anzuzeigen und die angegebenen Eingabeaufforderungsinformationen unter dem Bild auszugeben.

3. Spezifische Implementierung

(1) Verwenden Sie die Funktion now.getHours() Rufen Sie die Stunde der aktuellen Systemzeit ab und ändern Sie die verschiedenen Hintergründe entsprechend dieser Zeit. Der Hauptcode des JavaScript-Skripts lautet wie folgt:

<script language="javascript">
var now = new Date();
var hour = now.getHours();
if (hour >= 0 && hour <5){
document.write("<center><img src=&#39;1.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是凌晨时间"+hour+"点，祝您好梦</font>");
}
if (hour >= 5 && hour <8){
document.write("<center><img src=&#39;2.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是早上时间 "+hour+"点，祝您一天心情愉快</font>");
}
if (hour >= 8 && hour <11){
document.write("<center><img src=&#39;3.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
ocument.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是上午时间"+hour+"点，您别忘了小憩一会喝口水</font>");
}
if (hour >= 11 && hour <13){
document.write("<center><img src=&#39;4.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是中午时间"+hour+"点,记得要多吃饭 </font>");
}
if (hour >= 13 && hour < 17){
document.write("<center><img src=&#39;5.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是下午时间"+hour+"点，久坐办公室要适当起身运动一下</font>");
}
if (hour >= 17 && hour < 24){
document.write("<center><img src=&#39;6.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900>现在是晚上时间"+hour+"点，要注意早点入睡</font>");
}
</script>

(2) Fügen Sie einen Code im CSS-Stil wie folgt hinzu:

<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

(3) Fügen Sie einen Code im CSS-Stil wie folgt hinzu:

<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

Die getHours()-Methode des Date-Objekts in JavaScript gibt Stunden zurück Eine Zahl zwischen 0 und 23, die angibt, dass sie Folgendes enthält: Die Stunde des Tages (interpretiert in der lokalen Zeitzone), beginnend mit dem durch dieses Date-Objekt dargestellten Zeitpunkt.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS, um den Effekt zu erzielen, dass sich der Seitenhintergrund im Laufe der Zeit ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!