Regarder: Ajouter un journal de lap à un chronomètre React

Ce tutoriel étend notre chronomètre React pour inclure la fonctionnalité de synchronisation LAP - une fonctionnalité cruciale pour toute application de chronométrage sérieuse. Nous tirons parti de nos connaissances sur la gestion de l'état React, les tableaux et le rendu conditionnel pour y parvenir. Ceci est la partie 3 du bâtiment un chronomètre dans la série React.

Des questions fréquemment posées (FAQ) sur l'ajout de journalisation des LAP à un chronomètre React

Comment ajouter la journalisation des laps à un chronomètre React?

L'ajout de journalisation des tours nécessite une fonction déclenchée par un bouton "Lap". Cette fonction capture l'heure actuelle du chronomètre et l'ajoute à un tableau. Le useState Hook gère ce tableau.

const [laps, setLaps] = useState([]);

const handleLap = () => {
  setLaps([...laps, currentTime]);
};

Affichage des temps au tour

Affichez les temps au tour en mappant le tableau laps, rendant un composant pour chaque tour:

{laps.map((lap, index) => (
  <p key={index}>Lap {index + 1}: {lap}</p>
))}

Formatage des temps au tour

Améliorer la lisibilité en convertissant les millisecondes en minutes, secondes et millisecondes en utilisant une fonction d'assistance:

const formatTime = (time) => {
  const minutes = Math.floor(time / 60000);
  const seconds = Math.floor((time - minutes * 60000) / 1000);
  const milliseconds = time - minutes * 60000 - seconds * 1000;
  return `${minutes}:${seconds}:${milliseconds}`;
};

Réinitialiser les temps au tour

La réinitialisation des temps au tour consiste à nettoyer le tableau laps:

const handleReset = () => {
  setLaps([]);
  // ...reset stopwatch...
};

assurer des temps au tour précis

La précision

est primordiale. La fonction de journalisation des LAP doit être synchrone pour éviter les retards dans la capture de l'heure actuelle.

ajoutant des fonctionnalités de pause

introduire une variable d'état pour suivre si le chronomètre est en cours d'exécution:

const [isRunning, setIsRunning] = useState(false);

// ...in the time increment function...
if (isRunning) {
  // ...increment time...
}

reprendre de la pause

Préservez l'heure actuelle lors de la pause; ne le réinitialisez que lors d'une réinitialisation complète.

Implémentation de la fonctionnalité LAP (déjà couverte ci-dessus)

Les temps au tour persistants à travers les rafraîchissements

Utiliser localStorage pour stocker les temps au tour, assurer la persistance même après les rafraîchissements de page:

const handleLap = () => {
  const newLaps = [...laps, currentTime];
  setLaps(newLaps);
  localStorage.setItem('laps', JSON.stringify(newLaps));
};

conception réactive

Utilisez des requêtes multimédias CSS pour ajuster la disposition et le dimensionnement de différentes tailles de fenêtre:

@media (max-width: 600px) {
  .stopwatch {
    font-size: 20px;
  }
  .lap-logger {
    font-size: 16px;
  }
}

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!