Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:14:30
original
1140 Les gens l'ont consulté

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>
Copier après la connexion

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();
Copier après la connexion

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");
  }
}
Copier après la connexion
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");
}
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal