Uhr: Hinzufügen eines Lap -Loggers zu einer React -Stoppuhr hinzufügen

Dieses Tutorial erweitert unsere React -Stoppuhr um die LAP -Timing -Funktionalität - ein entscheidendes Merkmal für eine ernsthafte Zeitmessung. Wir werden unser Wissen über React State Management, Arrays und bedingte Rendering nutzen, um dies zu erreichen. Dies ist Teil 3 des Gebäudes A Stoppuhr in React -Serie.

häufig gestellte Fragen (FAQs) zum Hinzufügen von LAP -Protokollierung zu einer React Stopwatch

Wie füge ich einer React -Stoppuhr eine Lap -Protokollierung hinzu?

Hinzufügen von LAP -Protokollierung erfordert eine Funktion, die durch eine "LAP" -Taste ausgelöst wird. Diese Funktion erfasst die aktuelle Zeit der Stoppwatch und fügt sie zu einem Array hinzu. Der useState Hook verwaltet dieses Array.

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

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

Rundenzeiten

anzeigen

Rundenzeiten anzeigen, indem Sie über das Array laps und eine Komponente für jede Runde abgebildet werden:

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

formatieren Rundenzeiten

Verbesserung der Lesbarkeit durch Umwandlung von Millisekunden in Minuten, Sekunden und Millisekunden mit einer Helferfunktion:

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}`;
};

Rundenzeit zurücksetzen

Rücksetzen der Rundenzeiten beinhaltet das Löschen des laps -Array:

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

Sicherstellen Sie genaue Rundenzeiten

Genauigkeit ist von größter Bedeutung. Die LAP -Protokollierungsfunktion sollte synchron sein, um Verzögerungen bei der Erfassung der aktuellen Zeit zu vermeiden.

Pause -Funktionalität addieren

Führen Sie eine Statusvariable ein, um zu verfolgen, ob die Stoppuhr ausgeführt wird:

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

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

wieder von Pause

wieder aufgenommen

die aktuelle Zeit bei der Pause bewahren; Setzen Sie es nur während eines vollständigen Zurücksetzens zurück.

Implementierung der LAP -Funktionalität (bereits oben abgedeckt)

bestehen Rundenzeiten über Aktualisierungen

Verwenden Sie localStorage, um die Rundenzeiten zu speichern, und stellen Sie die Persistenz auch nach Aktualisierung der Seite sicher:

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

reaktionsschnelles Design

Verwenden Sie CSS -Medienabfragen, um das Layout und die Größen Sie für verschiedene Ansichtsfenster anzupassen:

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

Das obige ist der detaillierte Inhalt vonUhr: Hinzufügen eines Lap -Loggers zu einer React -Stoppuhr hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!