Partage
  • Partager sur Facebook
  • Partager sur Twitter

Horloge en HTML avec l'aide du Javascript

Le script n'est-il pas gourmand en memoire?

    4 août 2017 à 15:19:55

    Il y'a peut j'ai chercher et trouver sur internet un façon d'afficher la date et l'heure dans des cellules sur un page HTML avec un script en Javascript, et je m'interroge sur l'éventuelle "lourdeur" de ce dernier (sans insulter celui qui l'a conçu bien entendu) en mémoire et cherche une manière de l'alléger, le code est le suivant:

    <!DOCTYPEhtml>
    <html>
    <head>
    <script type="text/javascript">
    
    function calendrier()
    {
      var div0 = document.getElementById("calendrier");
      var j = new Date();
      var jTab = new Array("Dimanche ","Lundi ","Mardi ","Mercredi ","Jeudi ","Vendredi ","Samedi ");
      var jour = jTab[j.getDay()];
      var date = j.getDate();
      var mois = j.getMonth();
      var an = j.getFullYear();
      
      if (date<10){date="0"+date};
      if (mois<10){mois="0"+mois};
      if (an<10){an="000"+an};
      if (an<100){an="00"+an};
      if (an<1000){an="0"+an};
    
      div0.firstChild.nodeValue = jour+date+"/"+mois+"/"+an;
      window.setTimeout("calendrier()",1000); 
    }
    
    function horloge()
    {
      var div = document.getElementById("horloge");
      var heure = new Date();
      var h = heure.getHours();
      var m = heure.getMinutes();
      var s = heure.getSeconds();
    
      if (h<10){h="0"+h};
      if (m<10){m="0"+m};
      if (s<10){s="0"+s};
    
      div.firstChild.nodeValue = h+":"+m+":"+s;
      window.setTimeout("horloge()",1000);
    }
    
      calendrier(); //la fonction ici se rappelle d'elle-même mais n'est ce pas un peut lourd d'ouvrir un nouvelle instance chaque seconde?
      horloge(); //même question ici
    </script>
    </head>
    
    <body>
    <div id="calendrier"></div>
    <script type="text/javascript">
      calendrier();
    </script>
    
    <div id="horloge"></div>
    <script type="text/javascript">
      horloge();
    </script>
    </body>
    </html>
    

    -
    Edité par njarnb 19 septembre 2017 à 2:05:12

    • Partager sur Facebook
    • Partager sur Twitter
      4 août 2017 à 15:35:32

      Hello,

      Avant tout, please edit ce post pour mettre ton code dans la fonction "insersion de code". C'est le petit bouton </>, le code sera bien plus clair :)

      Ensuite, la fonction calendrier() tu peux l'appeler pour l'initialisation de la page puis uniquement quand tu changes de jour.

      Pour aléger encore plus tu peux mettre à jour uniquement les secondes toutes secondes, les minutes toutes les minutes...

      • Partager sur Facebook
      • Partager sur Twitter
      "Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
        4 août 2017 à 15:40:01

        Bonjour,

        Mauvais forum... Tu parles de Javascript, vas donc dans le forum Javascript, non? o_O

        • Partager sur Facebook
        • Partager sur Twitter

        Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

          4 août 2017 à 16:02:32

          Bonjour, je déplace dans le forum JS. Et pour insérer du code sur ce forum, merci d'utiliser le bouton code </>prévu à cet effet, en choisissant le bon langage, ce qui active la coloration syntaxique. Ce seras plus lisible pour tout le monde.

          Je t'invite à éditer ton message.

          • Partager sur Facebook
          • Partager sur Twitter
            19 septembre 2017 à 2:13:56

            Lord Morpheus a écrit:

            Bonjour,

            Mauvais forum... Tu parles de Javascript, vas donc dans le forum Javascript, non? o_O



            AbcAbc6 a écrit:

            Bonjour, je déplace dans le forum JS. Et pour insérer du code sur ce forum, merci d'utiliser le bouton code </>prévu à cet effet, en choisissant le bon langage, ce qui active la coloration syntaxique. Ce seras plus lisible pour tout le monde.

            Je t'invite à éditer ton message.



            Je m'excuse, c'est une page html, j'ai même pas pensé que je pouvait juste envoyer la partie JS sur le forum (je suis un peu bête :p).

            Je ferais preuve de plus de jugeote à l'avenir.


            Mr R0b0t a écrit:

            Hello,

            Avant tout, please edit ce post pour mettre ton code dans la fonction "insersion de code". C'est le petit bouton </>, le code sera bien plus clair :)

            Ensuite, la fonction calendrier() tu peux l'appeler pour l'initialisation de la page puis uniquement quand tu changes de jour.

            Pour aléger encore plus tu peux mettre à jour uniquement les secondes toutes secondes, les minutes toutes les minutes...

            Je te remercie beaucoup pour ton aide sur ce sujet même déplacé (du coup je sais plus trop où me mettre:euh:).

            • Partager sur Facebook
            • Partager sur Twitter
              19 septembre 2017 à 10:38:28

              Hello, pour ton horloge il y a pas mal de lacunes,

              pour commencer on n'utilise pas setTimeout pour l'horloge, pk ?? par ce que tu veux verifier les secondes chaque seconde => donc intervalle regulier de 1 seconde => setInterval, ce qui repetera l'execution d'une tache toutes les X secondes, contrairement à setTimeout qui executera une tache 1 fois apres un delai de X secondes

              Bref, je t'ai refait quelques petites modif rapid pour le mettre sur pieds, a toi de l'optimiser

              pour les ans t'a pas besoin de rajouter de 0 etant donnee qu'on est dans une annee a 4 chiffres, et quoi qu'il arrive on ne reculera pas

              donc 3 conditions inutiles à supprimer

              <!DOCTYPE html>
              <html lang="en">
              
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>Horloge</title>
              </head>
              
              <body>
                  <div id="calendrier"></div>
                  <div id="horloge"></div>
                  <script>
                      var VAL = 1000; //Fixe ton intervalle de calcul , 1 seconde
                      var calendrier = function(interval) { //Tu passe cet interval en parametre
                          //Il faut dire qu'on n'utilise pas setTimeout
                          //SetTimeout = executer une action apres un certain temps
                          //SetInterval = repeter l'execution d'une tache toutes les X secondes
                          //D'ou l'utilisation de setInterval au lieu de SetTimeout
                          window.setInterval(function() {
                              //Une fonction qui ne s'executera qu'ici et qui n'a comme role
                              //que de gerer la date, une fonction anonyme
                              var calendar = document.getElementById("calendrier");
                              var j = new Date();
                              var jours = new Array(
                                  "Dimanche ",
                                  "Lundi ",
                                  "Mardi ",
                                  "Mercredi ",
                                  "Jeudi ",
                                  "Vendredi ",
                                  "Samedi "
                              );
                              var jour = jours[j.getDay()];
                              var date = j.getDate();
                              var mois = j.getMonth();
                              var an = j.getFullYear();
              
                              if (date < 10) {
                                  date = "0" + date;
                              }
                              if (mois < 10) {
                                  mois = "0" + mois;
                              }
              
                              calendar.textContent = jour + date + "/" + mois + "/" + an;
                          }, interval);
                      }(VAL);
                      // Je lance la fonction directement a sa creation vu qu'elle est une
                      // fonction autonome, on ne dois rien toucher dedan, donc autant la lancer directement
                      // en ajoutant les parenthese et les parametre de la fonction directement
                      // apres la fermeture des acolades
              
                      var horloge = function(interval) {
                          window.setInterval(function() {
                              var timer = document.getElementById("horloge");
                              var heure = new Date();
                              var h = heure.getHours();
                              var m = heure.getMinutes();
                              var s = heure.getSeconds();
              
                              if (h < 10) {
                                  h = "0" + h;
                              }
                              if (m < 10) {
                                  m = "0" + m;
                              }
                              if (s < 10) {
                                  s = "0" + s;
                              }
                              timer.textContent = h + ":" + m + ":" + s;
                          }, interval);
                      }(VAL);
                  </script>
              </body>
              
              </html>

              Execution dispo sur Codepen

              Bon courage 

              • Partager sur Facebook
              • Partager sur Twitter
                24 septembre 2017 à 2:50:27

                Merci beaucoup! Cela va beaucoup m'aider!

                :p

                -
                Edité par njarnb 24 septembre 2017 à 2:51:14

                • Partager sur Facebook
                • Partager sur Twitter

                Horloge en HTML avec l'aide du Javascript

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown