1. Présentation
Parfois, afin d'enrichir l'effet d'affichage de la page, la page est transformée en un style qui modifie le contexte de la page en fonction du temps, afin que le spectateur ne se sente pas fatigué du site Web et que le site Web est rendu très nouveau. Cet exemple obtient l'heure actuelle du système par 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.
2. Points techniques
La méthode Gethours () de l'objet Date dans JavaScript est utilisée pour obtenir l'heure de l'heure actuelle du système, puis déterminer si l'heure en cours répond au délai spécifié dans un certain délai. S'il se réunit, utilisez la méthode écrite () de l'objet de document pour afficher une image sur la page et publier les informations d'invite spécifiées sous l'image.
3. Implémentation spécifique
(1) Utilisez la fonction NOW.GETHORS () pour obtenir l'heure de l'heure du système actuel. Changer différents arrière-plans en fonction de cette fois. Le code clé du script JavaScript principal est le suivant:
<Script Language = "JavaScript"> var now = new Date (); var hour = now.GetHours (); if (hour> = 0 && hour <5) {document.write ("<enter> <img src = '1.jpg' width = '600' height = '399'> <enter>"); document = bold = bold = bold = bold = bold = bold = bold colore.write; document.write (" = # ff9900> C'est le petit matin "+ hour +" point, je vous souhaite un bon rêve </font> ");} if (hour> = 5 && hour <8) {document.write (" <enter> <img src = '2.jpg' width = '600' height = '399'> <enter> "); document.write (" <p> "); Face = Bold Color = # FF9900> C'est le point "+ Hour +" le matin, je vous souhaite un jour heureux </font> ");} if (hour> = 8 && hour <11) {Document.Write (" <enter> <img src = '3.jpg' width = '600' height = '399'> <enter> "); ocument.write (" <p> "); document.write (" <font size = 6 face = bold color = # ff9900> c'est le matin "+ hour +" point, n'oubliez pas de faire une sieste et de boire une singe de l'eau </font> ");} if (hour> = 11 && hour <13) {document.write (" src = '4.jpg' width = '600' height = '399'> <enter> "); document.write (" <p> "); document.write (" <font size = 6 face = bold colore = # ff9900> c'est midi "+ hour +" temps, n'oubliez pas de manger plus </font> ");} if (hour> = 13 && hour <hour <hour <hour <hour <hour < 17) {Document.Write ("<enter> <img src = '5.jpg' width = '600' height = '399'> <enter>"); document.write ("<p>"); document.write ("<font size = 6 face = Bold Color = # ff9900> Temps </font> ");} if (hour> = 17 && hour <24) {document.write (" <enter> <img src = '6.jpg' width = '600' height = '399'> <enter> "); document.write (" <p> "); document.write (" <font size = 6 face = bold color = # ff9900> Attention à s'endormir tôt </font> ");} </cript>(2) Ajoutez un morceau de code de style CSS comme suit:
<style type = "Text / CSS"> Body {Background-Color: #FFFFF;} </ Style>(3) Ajoutez un morceau de code de style CSS comme suit:
<style type = "Text / CSS"> Body {Background-Color: #FFFFF;} </ Style>La méthode Gethours () de l'objet Date dans JavaScript renvoie une heure, et la valeur de retour est un nombre, entre 0 et 23, représentant l'heure du jour qui contient ou commence au moment représenté par cet objet de date (expliqué avec le fuseau horaire local).
Ce qui précède est la connaissance pertinente sur le code JS que l'éditeur vous a présenté pour réaliser l'effet de la modification de l'arrière-plan de la page en fonction du temps. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!