Processus d'écriture du minuteur JavaScript et méthode de mise en œuvre_compétences javascript

JavaScript est un langage de script très simple à utiliser avec de nombreux outils et fonctions puissantes. Parce que j'ai travaillé sur le back-end, je n'ai fait qu'effleurer la surface.

Passons au sujet principal : la minuterie. Parlons d'abord de la fonction de la minuterie :

1. Le minuteur doit pouvoir afficher l'heure sur la page

2. La minuterie est actualisée toutes les secondes. Chaque fois que la seconde atteint 60, la minute avance de 1, et lorsque la minute atteint 60, elle avance d'1 heure.

3. La minuterie doit pouvoir être réinitialisée, c'est-à-dire resynchronisée

4. Lorsque le chronomètre se termine, il doit y avoir un moyen de récupérer le chronomètre

Les fonctions ci-dessus sont très simples. Le timing devrait également avoir des fonctions telles que la pause, la poursuite du timing, etc. Ce n'est pas grave, nous le ferons une par une.

Première étape :

Nous réalisons une page simple avec une étiquette en temps réel et des boutons de démarrage et de pause. La page est dessinée comme suit :

Ne passez pas trop de temps sur une seule page, c'est juste pour vous aider à vous entraîner à écrire le premier morceau de code~

Étape 2 :

Analysons les attributs dont le minuteur a besoin :

1. Chronométrage, l'heure de début est requise

2.Heure de fin

3. Le temps total de marche, cet attribut est à restituer à l'utilisateur

4. L'afficheur est en fait un objet jquery ou un objet dom. Le timing doit être affiché au même endroit

.

5. L'heure d'affichage doit être démontée, nous avons donc l'attribut heure

6. Attribut Minute

7. Deuxième attribut (en fait inclus dans le temps total, notez-le d'abord au cas où vous en auriez besoin)

Jetons un coup d'œil au code :

    var startTime;//开始时间
    var endTime;//结束时间
    var timeLength;//总时长
    var timeSpan;//计时器走过的时间
    var displayer;//时间显示器
    var hh=0;//小时
    var mm=0;//分钟
    var status=0;//计时状态  

À première vue, il semble qu'il y ait quelques attributs supplémentaires, car le timing utilise la méthode JavaScript setTimeout, qui renvoie un objet. Nous pouvons utiliser cet objet pour effacer setTimeout (clearTimeout) ;

Étape 3 :

Analysons quelles méthodes sont nécessaires pour les minuteries :

1. La minuterie doit être démarrée, nous avons donc une méthode pour démarrer

2. Le minuteur doit être arrêté, nous avons donc une méthode d'arrêt. Après l'arrêt, il doit indiquer à l'utilisateur combien de temps il a compté, donc le temps doit être renvoyé

3. La minuterie doit également avoir une fonction de pause. Après une pause, vous pouvez recommencer le chronométrage à la position de pause, et la pause doit également revenir à la durée

4. Autour du démarrage et de l'arrêt, il devrait également y avoir des activités internes d'un minuteur toutes les secondes, similaires à une méthode déléguée, exécutées une fois toutes les secondes

5. Logique de présentation, il faut afficher l'heure réelle au présentateur sur la page, et faire quelques conversions de format pour une meilleure lisibilité

Ci-dessus le code, constructeur :

function createTimer(_startTime,_endTime,_timeLength,_displayer){
      startTime=_startTime;//开始时间
      endTime=_endTime;//结束时间
      timeLength=_timeLength;//总时长
      displayer=_displayer;//时间显示器
      hh=0;//小时
      mm=0;//分钟
      status=0;//计时状态
    }  

Le minuteur démarre :

    var start =function(){
      hh = 0;
      mm = 0;
      startTime=new Date();
      status = setTimeout(beat, 1000);
    } 

Fin du délai d'attente :

    var stop=function(){
      clearTimeout(status);
      endTime=new Date();
      timeLength=parseInt((endTime-startTime)/1000);
      alert(timeLength);
    }

Activité interne du minuteur par seconde :

     var beat=function(){
      endTime = new Date();
      timeSpan = parseInt((endTime - startTime)/1000);
      displayer[0].innerHTML = checkTime(timeSpan);
      status = setTimeout(beat, 1000);
    }

Afin d'afficher 00:00:00 dans l'image ci-dessus, nous avons besoin d'un morceau de logique de présentation

  var checkTime=function(len){
      len=len-mm*60;
      if (len >= 60) {
        this.mm++;
        //starttime1 = new Date();
        len = 0;
      }
      mm=mm-hh*60;
      if (mm >= 60) {
        hh++;
        mm = 0;
      }
      return j(self.hh) + ":" +j(mm) + ":" + j(len);
    }
  
    var j=function(arg){
      return arg >= 10 ? arg : "0" + arg;
    } 

Nous démarrons le minuteur et ce simple minuteur commence à fonctionner ^_^

Y a-t-il quelque chose qui manque ? Comment le chronomètre ne peut-il pas être mis en pause ? Lorsque j'ai conçu ces idées, je ne m'attendais pas à ce que la fonction pause saute seconde par seconde. J'étais si heureux jusqu'à ce que l'entreprise en ait besoin. , puis je me suis souvenu que je devais ajouter cette fonction.

Ce n'est pas grave, continuons la conception et ajoutons un bouton pause sur la page de démonstration :P

Analysons-le d’abord :

1. Après la pause, vous devez redémarrer sur le dernier nœud en pause. Nous implémentons cette fonction dans le bouton de démarrage, nous avons donc besoin d'un indicateur pour déterminer s'il faut redémarrer ou démarrer après la pause

2. Nous devons enregistrer le moment de la pause

3. Il est préférable de noter l'intervalle de temps de pause afin qu'il puisse être utilisé, sinon lorsque vous recommencerez, le temps passera immédiatement après l'intervalle dans la présentation (par exemple, lorsque vous faites une pause, c'est 00:00:09, et vous faites une pause d'une minute. Ensuite, si vous démarrez directement sans faire de réglages, l'heure deviendra 00:01:09)

On ajoute donc trois attributs :

  var isParse=false;//是否为暂停
    var parseTime;//暂停时间点
    var intervalTime = 0;//暂停时间间隔

Méthode pause :

   var parse=function(){
      parseTime = new Date();
      isParse = true;
      clearTimeout(status);
    }  

Remplacez la méthode start et la méthode render :

Ce qui précède est fait, notre minuterie a une fonction pause~

Regardez l'aperçu global du code, le code principal fait moins d'une centaine de lignes.

Après avoir écrit ceci, le travail principal est terminé. En fait, vous pouvez également encapsuler et utiliser un prototype pour attacher toutes les méthodes à un objet. Après avoir instancié un objet timer et initialisé certains attributs clés, ces méthodes peuvent être des appels d'objet. Je n'entrerai pas dans les détails ici. Si les chaussures pour enfants vous intéressent, vous pouvez les essayer~