Discussion :

[varilux56]

Bonjour.

J'utilise une fonction JavaScript pour afficher la date et l'heure sur une page HTML mais la couleur du texte est toujours noir.
Comment changer la couleur ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function date_heure(id)
{
        date = new Date;
        annee = date.getFullYear();
        moi = date.getMonth();
        mois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
        j = date.getDate();
        jour = date.getDay();
        jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        resultat = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee+' il est '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = resultat;
        setTimeout('date_heure("'+id+'");','1000');
 
        return '';
}

et le code HTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<td style="width: 456.767px; text-align: center; background-color: white;">
                <span id="date_heure"></span>
                <font size="2" color="#ff0000">
                  <script type="text/javascript">document.write(date_heure('date_heure'))</script>
                </font>  
              </td>

Merci de votre aide.

[javatwister]

Bonjour,

Sans vouloir jouer les donneurs de leçons:

• La balise <font> est dépréciée depuis les années 70.

• La méthode document.write() depuis 1982, à peu de chose près...

• Par contre, l'attribut style a une certaine utilité pour fixer l'apparence d'un élément HTML.

Vive le confinement et l'auto-formation à HTML, ici par exemple: https://j-willette.developpez.com/tu...bases-du-html/

[varilux56]

Oui, oui, oui !
Dépréciés et pourtant ça fonctionne.

Votre réponse "sans jouer les donneurs de leçons" ne résout pas mon problème.

Merci quand même.

[javatwister]

et pourtant ça fonctionne.

Qu'est-ce qu'on fait là alors?

[psychadelic]

plusieurs gros défauts dans l'ensemble de ton code.

ajouter du CSS: ( dans la partie HEADER HTML )

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style>
#date_heure {
  width: 456.767px;
  text-align: center;
  background-color: white;
  font-size: 2em;                   /* font-size doit avoir une unité !  */
  color: #ff0000;
}
</style>

pour le tableau simplement avoir :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<table>
  <tr>
/...
 
    <td id="date_heure"></td>
 
...
  </tr>
</table>

code JAVASCRIPT (à placer juste avant la fin du HTML BODY)

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script>
  function date_heure(id)
    {
    const datFjour = new Intl.DateTimeFormat('fr',{ weekday:'long', day:'2-digit', month:'long', year:'numeric'});
    const datFheur = new Intl.DateTimeFormat('fr',{ hour12: false, hour: '2-digit', minute: '2-digit', second:'2-digit'});
    const elmDate  = document.getElementById(id);
 
    setInterval(()=>
      {
        let d = new Date();
        elmDate.textContent = 'Nous sommes le ' + datFjour.format(d) + ' il est ' + datFheur.format(d)
      }, 1000);
    }
 
    date_heure('date_heure');  // lance la fonction 
</script>
</body>
</html>

tes problèmes :
partie HTML
1 ) utilisation de l'attribut style dans le TD (c'est obsolete)
2) le span es inutile, faut juste placer l' id sur le TD
3> la balise Font n'existe pas, et de toutes façons elle n'englobait pas le span

Partie JAVASCRIPT
1) mauvaise utilisation du setTimeout, qui rappelle la fonction elle même, ce qui en fait une boucle récursive infinie ( très très mauvaise idée !)
-> il existe depuis toujours la fonction setInterval
elle est icic utilisée en mode fonction fléchée, ce qui lui donne un acces aux 3 constantes de la fonction ( date_heure )

Sinon, utilise l'objet Intl, qui est justement fait pour formater les dates dans "toutes les dates du monde", donc plus besoin de créer des tableaux avec le libellé des jours ou des mois.
la doc est par la -> https://developer.mozilla.org/fr/doc...DateTimeFormat

[varilux56]

Merci psychadelic, mais ça ne marche pas. Même pas d'affichage.
La récursivité c'est pour rafraichir l'affichage (c'est le code que j'ai trouvé, il n'est pas de moi).
Si je modifie le code JS en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
resultat = 'Nous sommes le '+jours[jour]+' '+j+' '+mois[moi]+' '+annee+' il est '+h+':'+m+':'+s;
       /* document.getElementById(id).innerHTML = resultat;*/
        setTimeout('date_heure("'+id+'");','1000');
 
        return resultat;

j'ai bien la date et l'heure en rouge, mais ne sont pas rafraichies.

[varilux56]

J'ai recopié le code fournit par psychadelic dans une nouvelle page.

ça fonctionne mais la couleur du texte est toujours noir.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Horloge</title>
    <style>
      #date_heure {
      width: 456.767px;
      text-align: center;
      background-color: white;
      font-size: 2em;                   // font-size doit avoir une unité !
      color: #ff0000;
           }
    </style>
  </head>
  <body> 
    <p><br>
    </p>
    /... ...
    <table>
      <tbody>
        <tr>
          <td id="date_heure"><br>
          </td>
        </tr>
      </tbody>
    </table>
    <p></p>
    <script>
  function date_heure(id)
    {
    const datFjour = new Intl.DateTimeFormat('fr',{ weekday:'long', day:'2-digit', month:'long', year:'numeric'});
    const datFheur = new Intl.DateTimeFormat('fr',{ hour12: false, hour: '2-digit', minute: '2-digit', second:'2-digit'});
    const elmDate  = document.getElementById(id);
 
    setInterval(()=>
      {
        let d = new Date();
        elmDate.textContent = 'Nous sommes le ' + datFjour.format(d) + ' il est ' + datFheur.format(d)
      }, 1000);
    }
 
    date_heure('date_heure');  // lance la fonction 
</script>
  </body>
</html>

[javatwister]

Enlève le commentaire incorrect après "font-size"

[varilux56]

Super, ça marche.

Merci.
Mais pourquoi placer la fonction à la fin de la page ?

[javatwister]

pour l'instant, tu n'as pas de gestionnaire d'événement; donc ton script est interprété au fur et à mesure que la page est chargée; si tu places l'appel javascript dans le head, tu auras une erreur car ton élément td n'existe pas encore...

je te laisse faire tes recherches;