JS implémente l'effet de pause du chronomètre (explication graphique détaillée)

JavaScript est un élément indispensable du développement front-end. De nombreux effets ne peuvent être obtenus sans JS. Amis qui apprennent JavaScript, pouvez-vous utiliser JS pour créer un chronomètre ? Cet article vous expliquera comment utiliser JS pour obtenir l'effet d'un chronomètre, et cliquez sur le bouton pour arrêter le chronométrage. Enfin, je partagerai le code du chronomètre js avec vous. Les amis intéressés peuvent s'y référer.

Écrire un chronomètre avec JS nécessite beaucoup de connaissances JavaScript, telles que les événements de clic, les fonctions, les fonctions if, etc. Si vous n'êtes pas clair, vous pouvez vous référer aux articles pertinents sur le site Web PHP chinois, ou visitez le Tutoriel vidéo JavaScript, assurez-vous de bien apprendre les bases !

Exemple détaillé : Comment utiliser JavaScript pour créer un chronomètre, et vous pouvez cliquer sur le bouton pour arrêter le chronomètre.

Partie HTML :

Dans le formulaire, utilisez la saisie pour créer un bouton de démarrage du chronométrage (cliquez sur le bouton pour démarrer le chronométrage, le temps est en secondes) et un bouton d'arrêt (cliquez pour arrêter timing), Une zone de texte (utilisée pour afficher l'heure), le code spécifique est le suivant :

<form>
   <input type="button" value="开始计时!" onclick="start()" />
   <input type="text" id="txt" />
   <input type="button" value="停止!" onclick="stop()" />
</form>
<p>单击开始计时按钮，输入框将从0开始一直计时。以秒计算</p>
<p>单击停止按钮，停止计时，再次点击开始按钮，又再次开始计时。</p>

Partie JavaScript :

La page a été construite, puis JavaScript est utilisé pour obtenir l'effet. Donnez respectivement au bouton de démarrage et au bouton d'arrêt un événement de clic Lorsque le clic s'arrête, le chronométrage est mis en pause (le temps n'est pas effacé après l'arrêt). Utilisez setTimeout pour régler l'unité de chronométrage en secondes. Le code spécifique est le suivant :

var c=0;
  var t;
  var timer_is_on=0;
  function timedCount(){
   document.getElementById('txt').value=c;
   c=c+1;
   t=setTimeout(function(){timedCount()},1000);
  }
  function start(){
   if (!timer_is_on){
    timer_is_on=1;
    timedCount();
   }
  }
  function stop(){
   clearTimeout(t);
   timer_is_on=0;
  }

Rendu :

L'effet du chronomètre JavaScript est comme indiqué dans l'image ci-dessus. Vous pouvez l'essayer. pour voir si votre code peut atteindre le timing, l'effet, le tutoriel est plus détaillé, j'espère qu'il pourra vous aider !

Pour plus de didacticiels connexes, veuillez consulter le Manuel de référence en chinois JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!