Un moyen simple d'implémenter une minuterie dans les compétences javascript_javascript

Les chronomètres sont également des fonctions fréquemment utilisées dans la vie, telles que l'exercice, la course à pied et d'autres activités connexes. Nous utilisons Javascript pour compléter un chronomètre.

La minuterie est principalement un traitement logique du temps. Par exemple, 60 secondes sont égales à 1 minute, et 60 minutes sont égales à une heure. Nous ne traitons ici que des heures. C'est une logique si simple, puis affichée de manière dynamique. dans une entrée interne.

Terminons maintenant cette interface

<label>计时:</label> 
<input type="text" name="" id="timer"/> 
<button onclick="pause(this)" id="pause" state="on">暂停</button>
<button onclick="restart()">重新开始</button>

Le but de donner un identifiant à l'élément label est d'obtenir le label, puis d'ajouter deux événements de clic, un événement de pause pour le compteur et un événement de redémarrage.

Tout d'abord, terminons le processus de démarrage du timing. Pour démarrer le timing, nous utilisons principalement la méthode setInterval, qui exécute la méthode toutes les 1 seconde, afin que nous puissions traiter le temps comme mentionné au début, 60 secondes. est égal à 1 Minutes..., vous devez donc ici faire preuve de jugement pour traiter, et enfin afficher les secondes, minutes et heures obtenues dans la zone de saisie
.

var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时

//60秒 === 1分
//60分 === 1小时
function timer() {
 return setInterval(function () {

  var str_sec = n_sec;
  var str_min = n_min;
  var str_hour = n_hour;
  if ( n_sec < 10) {
   str_sec = "0" + n_sec;
  }
  if ( n_min < 10 ) {
   str_min = "0" + n_min;
  }

  if ( n_hour < 10 ) {
   str_hour = "0" + n_hour;
  }

  var time = str_hour + ":" + str_min + ":" + str_sec;
  ele_timer.value = time;
  n_sec++;
  if (n_sec > 59){
   n_sec = 0;
   n_min++;
  }
  if (n_min > 59) {
   n_sec = 0;
   n_hour++;
  }


 }, 1000);
}

var n_timer = timer();

Nous utilisons la méthode timer pour encapsuler la méthode setInterval afin de suspendre et de redémarrer le traitement plus tard
. Lorsque l'utilisateur clique sur Pause, le minuteur arrêtera le chronométrage. Si l'utilisateur continue de cliquer sur le bouton, le minuteur continuera à chronométrer. Pour cet état, nous attribuons un attribut au bouton. 🎜>

//暂停和继续
function pause(self) {
  var state = self.getAttribute("state");
  if (state === "on") {
   clearInterval(n_timer);
   self.textContent = "继续";
   self.setAttribute("state", "off");
  } else {
   n_timer = timer();
   self.textContent = "暂停";
   self.setAttribute("state", "on");
  }
}

Enfin, regardons le redémarrage. Le redémarrage de l'événement est encore plus simple. Remettez le compteur à 0, puis modifiez l'état initial du bouton pause.

function restart() {
 clearInterval(n_timer);
 n_sec = 0;
 n_min = 0;
 n_hour = 0;
 n_timer = timer();

 var ele_pause = document.getElementById("pause");
 ele_pause.textContent = "暂停";
 ele_pause.setAttribute("state", "on");
}

Ceci complète la fonction de synchronisation. L'effet est le suivant

J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.