Utilisez JS pour obtenir l'effet de modifier l'arrière-plan de la page au fil du temps

Cet article présente principalement les informations pertinentes sur le code JS pour obtenir l'effet de modification de l'arrière-plan de la page en fonction du temps. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent le lire ensemble

1 .Aperçu

Parfois, afin d'enrichir l'effet d'affichage de la page, la page est transformée en un style qui modifie l'arrière-plan de la page en fonction temps, afin que le spectateur ne ressente pas ce site Web. Si vous en avez assez, vous sentirez également que le site Web est très innovant. Cet exemple obtient l'heure de l'heure système actuelle via la méthode getHours() de l'objet Date, puis modifie l'image d'arrière-plan de la page en fonction de différentes périodes de temps.

2. Points techniques

Utiliser principalementl'objet getHours( de Date en JavaScript ) pour obtenir l'heure actuelle du système, puis déterminer si l'heure actuelle correspond à la période spécifiée dans une certaine période de temps. Si elle correspond, utilisez la méthode write() du document. objet pour afficher une image sur la page et afficher les informations d'invite spécifiées sous l'image.

3. Implémentation spécifique

(1) Utilisez la fonction now.getHours() Obtenez l'heure de l'heure actuelle du système et modifiez différents arrière-plans en fonction de cette heure. Le code principal de la clé du script JavaScript est le suivant :

<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) Ajoutez un morceau de code de style CSS comme suit :

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

(3) Ajoutez un morceau de code de style CSS comme suit :

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

La méthode getHours() de l'objet Date en JavaScript renvoie des heures. nombre compris entre 0 et 23, indiquant qu'il contient ou L'heure du jour (interprétée en fuseau horaire local) commençant à l'instant représenté par cet objet Date.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!