Médiaforma

jQuery – Mettre en place un timer

Print Friendly, PDF & Email

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

merci, un bon script bien utile ;-)

Merci pour le script.
Serait-il possible de le combiner avec un autre qui donne un cadre de réglage du timer?
Pour par exemple sans changer le script ici régler le temps sur le timer et la vitesse du temps.

Bonjour Idriss,

Je veux bien vous aider, mais il vous faut être plus précis.
Que voulez-vous faire exactement ?

Ajuster l’horloge ?
Créer un timer ?

Cordialement.
Michel Martin