Minuterie de comptage JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Minuterie de comptage JavaScript
Mehvish Ashiq 12 octobre 2023
JavaScript JavaScript Timer
  1. Utilisez les fonctions setInterval() et Math pour afficher le minuteur JavaScript
  2. Utilisez les fonctions setInterval() et pad() pour afficher le minuteur JavaScript
  3. Utilisez jQuery pour afficher le compte à rebours JavaScript
  4. Utiliser l’objet et les propriétés pour afficher le minuteur de comptage JavaScript
Minuterie de comptage JavaScript

Ce didacticiel vous présente le minuteur JavaScript. Il utilise les fonctions et objets setInterval(), pad(), clearInterval() et Math.floor() pour créer un compte à rebours.

Il illustre également comment jQuery peut vous aider à optimiser votre code.

Utilisez les fonctions setInterval() et Math pour afficher le minuteur JavaScript

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
      <div id="count_up_timer">00:00:00</div>
      <button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
  </body>
</html>

Code CSS :

#count_up_timer{
	font-size: 100px;
	font-weight: bold;
	color: darkblue;
}
#stop_count_up_timer{
	background-color:black;
	color:white
}

Code JavaScript :

var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;

function countUpTimer() {
  ++totalSeconds;
  var hour = Math.floor(totalSeconds / 3600);
  var minute = Math.floor((totalSeconds - hour * 3600) / 60);
  var seconds = totalSeconds - (hour * 3600 + minute * 60);
  document.getElementById('count_up_timer').innerHTML =
      hour + ':' + minute + ':' + seconds;
}

Production :

javascript count up timer - première partie de sortie

Dans cet exemple de code, la fonction setInterval() appelle la fonction countUpTimer() toutes les secondes (1 seconde = 1000 millisecondes). Dans la fonction countUpTimer(), la variable totalSeconds est d’abord incrémentée de 1, puis utilisée pour la conversion en hour, minute, et secondes.

Après cela, le premier élément dont la valeur d’id est count_up_timer est sélectionné. Le contenu HTML (innerHTML) a été remplacé par la minuterie (hour:minute:seconds). Le compte à rebours s’arrêtera dès que vous cliquerez sur le bouton Stop Timer.

La fonction setInterval() appelle une fonction à un intervalle donné. Il faut deux paramètres, et les deux sont obligatoires. Le premier paramètre est une fonction et l’autre est un intervalle en millisecondes.

Cependant, la méthode setInterval() continue d’appeler la fonction jusqu’à ce que la fenêtre soit fermée ou que la fonction clearInterval() soit appelée. Il retourne le id du temps que nous pouvons utiliser avec la fonction clearInterval() pour arrêter le minuteur.

La propriété .innerHTML renvoie ou modifie le contenu HTML de l’élément spécifié. Le Math.floor() renverra le plus grand entier (inférieur ou égal au nombre donné).

Utilisez les fonctions setInterval() et pad() pour afficher le minuteur JavaScript

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
    <h1>Count Up Timer For One Hour</h1>
	<div id = "timer">
	   <span id="minutes"></span>:<span id="seconds"></span>
	</div>
   </body>
</html>

Code CSS :

#timer{
	font-size:100px;
	color:green;
	margin-left:80px;
}

Code JavaScript :

var second = 0;
function pad(value) {
  return value > 9 ? value : '0' + value;
}
setInterval(function() {
  document.getElementById('seconds').innerHTML = pad(++second % 60);
  document.getElementById('minutes').innerHTML = pad(parseInt(second / 60, 10));
}, 1000);

Production :

javascript count up timer - deuxième partie de sortie

Dans cet exemple de code, la fonction pad() ajoute un zéro non significatif. Il vérifie si la valeur qui lui est transmise est un chiffre unique (inférieur ou égal à 9), puis il ajoute un zéro non significatif, sinon non.

La fonction setInterval() appelle la fonction donnée à un intervalle particulier. L’intervalle doit être en millisecondes. Vous pouvez visiter ce lien pour lire.

Ensuite, le setInterval() appellera une fonction anonyme pour récupérer les éléments dont les valeurs d’id sont seconds et minutes. Cette fonction anonyme remplace le innerHTML (contenu HTML) par la valeur renvoyée par la fonction pad().

La fonction parseInt() analyse l’argument de chaîne donné et renvoie un entier de radix particulier.

Utilisez jQuery pour afficher le compte à rebours JavaScript

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>Count Up Timer For One Hour</h1>
	<div id = "timer">
	   <span id="minutes"></span>:<span id="seconds"></span>
	</div>
   </body>
</html>

Code CSS :

#timer{
	font-size:100px;
	color:green;
	margin-left:80px;
}

Code JavaScript :

var second = 0;
function pad(value) {
  return value > 9 ? value : '0' + value;
}
setInterval(function() {
  $('#seconds').html(pad(++second % 60));
  $('#minutes').html(pad(parseInt(second / 60, 10)));
}, 1000);

Production :

javascript compte à rebours - sortie cinq

Que faire si vous voulez un zéro non significatif mais que vous ne voulez pas utiliser la fonction pad() et la bibliothèque jQuery. Alors, la solution suivante est pour vous.

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
      <div id="count_up_timer">00:00:00</div>
      <button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
  </body>
</html>

Code CSS :

#count_up_timer{
	font-size: 100px;
	font-weight: bold;
	color: darkblue;
}
#stop_count_up_timer{
	background-color:black;
	color:white
}

Code JavaScript :

var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;

function countUpTimer() {
  ++totalSeconds;
  var hour = Math.floor(totalSeconds / 3600);
  var minute = Math.floor((totalSeconds - hour * 3600) / 60);
  var seconds = totalSeconds - (hour * 3600 + minute * 60);
  if (hour < 10) hour = '0' + hour;
  if (minute < 10) minute = '0' + minute;
  if (seconds < 10) seconds = '0' + seconds;
  document.getElementById('count_up_timer').innerHTML =
      hour + ':' + minute + ':' + seconds;
}

Production :

javascript count up timer - troisième partie de sortie

Dans le code ci-dessus, les instructions if sont utilisées pour vérifier hour, minute et seconds. Un zéro non significatif sera ajouté s’ils sont inférieurs à 10 (cela signifie qu’ils sont à un seul chiffre) ; sinon, non.

Vous avez peut-être remarqué que tous les compteurs que nous avons appris démarrent dès que le code est exécuté. Et si nous pouvions avoir un contrôle total sur le compte à rebours JavaScript ? Apprenons cela aussi.

Utiliser l’objet et les propriétés pour afficher le minuteur de comptage JavaScript

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Count Up Timer in JavaScript</title>
  </head>
  <body>
    <div id="timer">
      <span id="minutes">00</span>:<span id="seconds">00</span>
    </div>
    <div id="control">
      <button id="startbtn">START</button>
      <button id="pausebtn">PAUSE</button>
      <button id="resumebtn">RESUME</button>
      <button id="resetbtn">RESET</button>
    </div>
  </body>
</html>

Code CSS :

#timer{
	font-size: 100px;
	font-weight: bold;
}
#control>#startbtn{
	background-color:green;
	color:white;
}
#control>#pausebtn{
	background-color:blue;
	color:white;
}
#control>#resumebtn{
	background-color:orange;
	color:white;
}
#control>#resetbtn{
	background-color:red;
	color:white;
}

Code JavaScript :

var Clock = {
  totalSeconds: 0,
  startTimer: function() {
    if (!this.interval) {
      var self = this;
      function pad(val) {
        return val > 9 ? val : '0' + val;
      }
      this.interval = setInterval(function() {
        self.totalSeconds += 1;
        document.getElementById('minutes').innerHTML =
            pad(Math.floor(self.totalSeconds / 60 % 60));
        document.getElementById('seconds').innerHTML =
            pad(parseInt(self.totalSeconds % 60));
      }, 1000);
    }
  },
  resetTimer: function() {
    Clock.totalSeconds = null;
    clearInterval(this.interval);
    document.getElementById('minutes').innerHTML = '00';
    document.getElementById('seconds').innerHTML = '00';
    delete this.interval;
  },
  pauseTimer: function() {
    clearInterval(this.interval);
    delete this.interval;
  },
  resumeTimer: function() {
    this.startTimer();
  },
};

document.getElementById('startbtn').addEventListener('click', function() {
  Clock.startTimer();
});
document.getElementById('pausebtn').addEventListener('click', function() {
  Clock.pauseTimer();
});
document.getElementById('resumebtn').addEventListener('click', function() {
  Clock.resumeTimer();
});
document.getElementById('resetbtn').addEventListener('click', function() {
  Clock.resetTimer();
});

Production :

javascript count up timer - sortie quatrième partie

Ici, nous avons créé un objet nommé Clock ayant 5 propriétés nommées totalSeconds, startTimer, resetTimer, pauseTimer et resumeTimer. La valeur de chaque propriété est une fonction anonyme avec son propre corps de fonction.

Le mot-clé this fait référence à un objet auquel il appartient et contient toujours la référence d’un objet.

Par exemple, this.resumeTimer signifie la propriété resumeTimer de l’objet this (Clock).

La fonction clearInterval() est utilisée pour arrêter le compte à rebours. Rappelez-vous que chaque propriété de l’objet Clock fonctionnera sur l’événement de clic.

Auteur: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

Article connexe - JavaScript Timer