Header

Partagez | 

Afficher un texte en fonction de la date du jour

Message Sujet: Afficher un texte en fonction de la date du jour   Ven 29 Juil - 11:08

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à créer un javascript qui va nous afficher un texte particulier en fonction de la date du jour ou en fonction d'une période Smile

Prêt ? Partez !

Le code



Code:
$(document).ready(function(){
/* On cherche la date d'aujourd'hui => A ne pas modifier */
   d= new Date();
   jour = d.getDate();
   mois = d.getMonth() +1;
   annee = d.getFullYear();
   var adj = +jour+"/"+mois+"/"+annee;
   date_info = d.getTime();
/* C'est bon on a récupéré la date du jour */
   
/***** Dates de la période 1 ******/
   /* Début */
   var d_periode1 = "14/6/2011";
   deb_periode1 = Date.parse("2011,6,14");
   /* Fin */
   var f_periode1 = "26/6/2011";
   fin_periode1 = Date.parse("2011,6,26");
   
   /* On teste si aujourd'hui fait partie de la période 1 */
   if ((info_date > deb_periode1 && info_date < fin_periode1) || adj == d_periode1 || adj == f_periode1 ){
       document.getElementById("info_date").innerHTML = "<p style=\"color:#e26e26\">Période 1</p><p style=\"font-size:10px; font-style;italic;\">Du 14 Juin au 26 juin</p>"; /* Texte à afficher pour cette période */
   }
      
/***** Dates de la période 2 ******/
   /* Début */
   var d_periode2 = "27/6/2011";
   deb_periode2 = Date.parse("2011,6,27");
   /* Fin */
   var f_periode2 = "7/7/2011";
   fin_periode2 = Date.parse("2011,7,7");
   
   /* On teste si aujourd'hui fait partie de la période 2 */
   if ((info_date > deb_periode2 && info_date < fin_periode2) || adj == d_periode2 || adj == f_periode2 ){
       document.getElementById("info_date").innerHTML = "<p style=\"color:#e26e26\">Période 2</p><p style=\"font-size:10px; font-style;italic;\">Du 27 Juin au 07 Juillet </p>"; /* Texte à afficher pour cette période*/
   }
   
/***** Texte à afficher pour le jour de Noël ******/
   var j_noel = "25/12/2011";

   /* On teste si aujourd'hui c'est Noël */
   if (adj == j_noel){
       document.getElementById("info_date").innerHTML = "<p style=\"color:#e26e26\">Joyeux Noël !</p>"; /* Texte à afficher pour cette journée*/
   }
   
});

L'explication



Ne faisons pas de simple copier/coller. Essayons de comprendre comment fonctionne ce code.

Le code à ne pas changer



Déjà, voilà ce qu'il ne faudra jamais modifier

Code:
$(document).ready(function(){
/* On cherche la date d'aujourd'hui => A ne pas modifier */
   d= new Date();
   jour = d.getDate();
   mois = d.getMonth() +1;
   annee = d.getFullYear();
   var adj = +jour+"/"+mois+"/"+annee;
   date_info = d.getTime();
/* C'est bon on a récupéré la date du jour */
   

});

Mais on va quand même essayer de comprendre Smile

Code:
$(document).ready(function(){
= le code sera lu dès l'affichage de la page

Code:
d= new Date();
   jour = d.getDate();
   mois = d.getMonth() +1;
   annee = d.getFullYear();

On prend la date d'aujourd'hui et on met dans une variable "jour" le jour, dans une variable "mois" le numéro du mois et dans une variable "annee" l'année.

Code:
var adj = +jour+"/"+mois+"/"+annee;
On met tout ça dans une variable "ajd" qui va afficher la date de la manière suivante : J/M/AAAA

Code:
   date_info = d.getTime();
On compte ensuite le nombre de milliseconde entre le 01/01/70 à minuit et aujourd'hui. (nécessaire pour comparer des dates)

Le code de test pour une période



Maintenant, essayons de comprendre comment on définit le texte pour une période. Je vous rappelle le code (je ne le fais qu'une pour une seule période).

Code:
/***** Dates de la période 1 ******/
   /* Début */
   var d_periode1 = "14/6/2011";
   deb_periode1 = Date.parse("2011,6,14");
   /* Fin */
   var f_periode1 = "26/6/2011";
   fin_periode1 = Date.parse("2011,6,26");
   
   /* On teste si aujourd'hui fait partie de la période 1 */
   if ((info_date > deb_periode1 && info_date < fin_periode1) || adj == d_periode1 || adj == f_periode1 ){
       document.getElementById("info_date").innerHTML = "<p style=\"color:#e26e26\">Période 1</p><p style=\"font-size:10px; font-style;italic;\">Du 14 Juin au 26 juin</p>"; /* Texte à afficher pour cette période*/
   }

1/ On va créer une variable contenant la date de début :
Code:
var d_periode1 = "14/6/2011";
Ici, la date est à indiquer de cette façon : J/M/AAAA

2/ On va créer une variable qui va nous servir de comparaison (pour savoir si "aujourd'hui" fait partie de la période). Pour cela, on va utiliser "Date.parse" qui va compter le nombre de milliseconde entre le 01/01/70 à minuit et la date indiquée
Code:
deb_periode1 = Date.parse("2011,6,14");
Cette fois, la date s'écrit de cette façon : AAAA,M,J

3/ On fait pareil pour la fin de la période.

4/ Maintenant, on passe au test.
* La date d'aujourd'hui est dans la période (à comprendre : aujourd'hui est plus grand que la date de début et est plus petite que la date de fin). En javascript, le "et", s'écrit &&
Code:
info_date > deb_periode1 && info_date < fin_periode1
ou (en javascript, le "ou" s'écrit || )
* La date d'aujourd'hui est la même que la date de début de période (ici, pour dire "la même que", on utilise == )
Code:
adj == d_periode1
ou
* La date d'aujourd'hui est la même que la date de fin de période
Code:
adj == f_periode1

Et toutes ces conditions sont dans un test "if"
Code:
if ((info_date > deb_periode1 && info_date < fin_periode1) || adj == d_periode1 || adj == f_periode1 ){
      
   }

5/ On indique ce qu'il faut écrire comme information si aujourd'hui est dans la période :

Code:
 document.getElementById("info_date").innerHTML = "le texte à afficher"

* Remarque 1 : si votre texte contient des guillemets, il faudra les précéder d'un \ pour ne pas chambouller le code
Code:
document.getElementById("info_date").innerHTML = "le texte à afficher \"entre guillemet\""

* Remarque 2 : ici, vous ne devez modifier que la partie "le texte à afficher"

* Remarque 3 : vous pouvez mettre du html/css dans votre texte

6/ Répêtez ses opérations autant de fois que vous avez de périodes. N'oubliez pas de changer les noms de variable (remplacez periode1 par periode2, periode3... attention à ne pas mettre d'espace, de caractères spéciaux ou d'accents).

Le code de test pour un jour en particulier



Maintenant, voyons voir comment ça se passe pour afficher un texte pour un jour en particulier. Je vous rappelle le code :

Code:
/***** Texte à afficher pour le jour de Noël ******/
   var j_noel = "25/12/2011";

   /* On teste si aujourd'hui c'est Noël */
   if (adj == j_noel){
       document.getElementById("info_date").innerHTML = "<p style=\"color:#e26e26\">Joyeux Noël !</p>"; /* Texte à afficher pour cette journée*/
   }

1/ On va créer une variable contenant la date du jour en question :
Code:
var j_noel = "25/12/2011";
Ici, la date est à indiquer de cette façon : J/M/AAAA

2/ On va faire un test d'égalité :
* La date d'aujourd'hui est la même que la date indiquée (ici, pour dire "la même que", on utilise == )
Code:
adj == j_noel

On met cette condition dans un test "if"
Code:
if (adj == j_noel){
      
   }

3/ On indique ce qu'il faut écrire comme information si aujourd'hui est dans la période :

Code:
 document.getElementById("info_date").innerHTML = "le texte à afficher"

* Remarque 1 : si votre texte contient des guillemets, il faudra les précéder d'un \ pour ne pas chambouller le code
Code:
document.getElementById("info_date").innerHTML = "le texte à afficher \"entre guillemet\""

* Remarque 2 : ici, vous ne devez modifier que la partie "le texte à afficher"

* Remarque 3 : vous pouvez mettre du html/css dans votre texte

Facile hein ? ^^

Comment l'installer



Sur votre site



1/ On va enregister le code javascript dans une page nommé "info_date.js". N'oubliez pas ensuite d'héberger ce fichier.

2/ Dans le "head" de notre page, copiez ceci :

Code:
<script type="text/javascript" src="lien"></script>

(en remplaçant "lien" par le lien de votre page "info_date.js")

Exemple :
Code:
<script type="text/javascript" src="http://school-of-pub.fr/function/info_date.js"></script>

3/ Ensuite, allez sur la page où vous désirez afficher des infos sur la date, et copier ceci à l'endroit voulu
Code:
<p id="info_date"></p>
c'est là que s'afficheront les infos de la période ^^

Sur votre ForumActif



1/ On va copier le code javascript dans une page javascript du forum. Pour cela, faites PA >> modules >> Gestion des codes Javascript. Là on va créer une nouvelle page en cochant "sur toutes les pages", on va lui donner comme nom "info_date" et on va y copier coller le code javascript.

2/ Ensuite, on va aller à l'endroit où vous désirez afficher le message et vous allez copier ceci :
Code:
<p id="info_date"></p>
c'est là que s'afficheront les infos de la période ^^

Remarque : cela fonctionne partout sur le forum, même dans les messages

Sur votre Xooit



1/ Ouvez le template "overall_header". Juste avant

Code:
</head>

Copiez ceci

Code:
<script language="Javascript" type="text/javascript">

le code javascript

</script>

(en remplaçant "le code javascript" par votre code)

Et validez.

2/ Ensuite, on va aller à l'endroit où vous désirez afficher le message et vous allez copier ceci :
Code:
<p id="info_date"></p>
c'est là que s'afficheront les infos de la période ^^

Remarque : cela fonctionne partout sur le forum, même dans les messages




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas

Message Sujet: Re: Afficher un texte en fonction de la date du jour   Dim 22 Juil - 16:01

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Questions Fréquentes


y a-t-il un moyen de ne pas mettre d'année pour que ça apparaisse tout les ans ?


C'est effectivement possible Smile

Pour cela, on va utiliser la variable "année" qui contient l'année dans laquelle nous sommes (donc 2012) et qui se met automatiquement à jour. On va donc remplacer par exemple :

Code:
/* Début */
  var d_periode1 = "14/6/2011";
  deb_periode1 = Date.parse("2011,6,14");
  /* Fin */
  var f_periode1 = "26/6/2011";
  fin_periode1 = Date.parse("2011,6,26");

Par

Code:
/* Début */
  var d_periode1 = "14/1/"+annee+"";
  deb_periode1 = Date.parse(""+annee+",1,14");
  /* Fin */
  var f_periode1 = "26/1/"+annee+"";
  fin_periode1 = Date.parse(""+annee+",1,26");


Revenir en haut Aller en bas
Afficher un texte en fonction de la date du jour
Page 1 sur 1
 Sujets similaires
-
» Code pour afficher la date du Jour ?!...
» Problème avec un code permettant d'afficher du texte en survolant une image
» Afficher un texte aléatoirement en javascript
» Convertisseur date vers jour Julien et inversement
» Module calendrier = date du jour en gras
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens