Changer couleur texte dans fonction Time JavaScript ?

Version imprimable

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:

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&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;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:

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.

29/03/2020, 16h55
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/ ;)
29/03/2020, 17h27
varilux56

Solution ?

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.
29/03/2020, 17h31
javatwister

Citation:

Envoyé par varilux56

et pourtant ça fonctionne.

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

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

ajouter du CSS: ( dans la partie HEADER HTML )
Code:

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:

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:

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

Afficher la date et l'heure.

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:

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.

Oups !

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

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

Code:

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>

29/03/2020, 19h49
javatwister

Enlève le commentaire incorrect après "font-size"
29/03/2020, 19h57
varilux56

OK!

Super, ça marche.

Merci.
Mais pourquoi placer la fonction à la fin de la page ?
29/03/2020, 21h53
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;