Médiaforma

jQuery – Mettre en place un timer

Print Friendly

Le langage JavaScript permet de répéter l’exécution d’une fonction à intervalles réguliers. Pour cela, vous utiliserez le code suivant :

function bis(){
  //Une ou plusieurs instructions
}

setInterval(bis,période en ms);

 

Exercice

En utilisant la fonction setInterval(), définissez une horloge qui affiche l’heure au format HH:MM:SS dans un élément div.

Pour cela, vous devrez définir un objet Date et obtenir les heures, les minutes et les secondes en appliquant les fonctions getHours(), getMinutes() et getSeconds() à cet objet.

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Horloge élémentaire</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="heure"></div>
    <script>
    $(function() {
      function horloge(){
        var hms = new Date();
        var h, m, s;
        h = hms.getHours();
        if (h<10) h = "0" + h;
        m = hms.getMinutes();
        if (m<10) m = "0" + m;
        s = hms.getSeconds();
        if (s<10) s = "0" + s;
        $('#heure').html(h + ' : ' + m + ' : ' + s);
      }
      setInterval(horloge,1000);
    });
    </script>
  </body>
</html>

 

Voici le résultat :
 

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply