Étape 4 : JS - La Précision du Temps

Contrairement aux autres projets, ici on touche à la notion de temps réel. Le piège classique : utiliser juste setInterval et ajouter +10ms. C’est imprécis car le code prend du temps à s’exécuter et “dérape” au bout de quelques minutes. La bonne méthode : Stocker l’heure de départ (Date.now()) et calculer la différence en temps réel.

1. Variables Globales

Ouvrez script.js.

// Affichage
const display = document.querySelector('.timer-display');
const lapsList = document.getElementById('lapsList');

// Boutons
const startStopBtn = document.getElementById('startStopBtn');
const lapBtn = document.getElementById('lapBtn');
const resetBtn = document.getElementById('resetBtn');

// Variables d'état
let startTime = 0;
let elapsedTime = 0;
let timerInterval;
let isRunning = false;

2. Le cœur : formatTime

Cette fonction transforme un nombre de millisecondes (ex: 65432) en texte (01:05.43).

function formatTime(ms) {
    // Calculs mathématiques pour extraire h, m, s, ms
    // 1000 ms = 1 seconde
    // 60000 ms = 1 minute

    let date = new Date(ms);
    let m = date.getUTCMinutes().toString().padStart(2, '0');
    let s = date.getUTCSeconds().toString().padStart(2, '0');
    let msDisplay = Math.floor(date.getUTCMilliseconds() / 10)
        .toString()
        .padStart(2, '0');

    // On retourne du HTML pour pouvoir styliser les millisecondes différemment
    return `${m}:${s}<span class="milliseconds">.${msDisplay}</span>`;

    // Note: Pour faire simple ici on ignore les heures, mais le principe est le même
}

function updateDisplay() {
    // On calcule le temps écoulé TOTAL
    // Temps actuel - Heure de départ + Temps accumulé avant (si pause)
    const currentTime = Date.now();
    const timeToDisplay = currentTime - startTime + elapsedTime;

    display.innerHTML = formatTime(timeToDisplay);
}

3. Démarrer / Arrêter

function startStop() {
    if (isRunning) {
        // STOP
        clearInterval(timerInterval);
        // On sauvegarde combien de temps s'est écoulé jusqu'ici
        elapsedTime += Date.now() - startTime;
        isRunning = false;

        // UI
        startStopBtn.textContent = 'Start';
        startStopBtn.classList.remove('stop');
        startStopBtn.classList.add('start');
        resetBtn.disabled = false; // On peut reset seulement à l'arrêt
        lapBtn.disabled = true;
    } else {
        // START
        startTime = Date.now();
        timerInterval = setInterval(updateDisplay, 10); // Mise à jour tous les 1 centièmes
        isRunning = true;

        // UI
        startStopBtn.textContent = 'Stop';
        startStopBtn.classList.remove('start');
        startStopBtn.classList.add('stop');
        resetBtn.disabled = true;
        lapBtn.disabled = false;
    }
}

startStopBtn.addEventListener('click', startStop);

4. Reset et Tour

function reset() {
    clearInterval(timerInterval);
    startTime = 0;
    elapsedTime = 0;
    isRunning = false;

    display.innerHTML = '00:00<span class="milliseconds">.00</span>';
    lapsList.innerHTML = ''; // On vide les tours

    resetBtn.disabled = true;
    lapBtn.disabled = true;
}

function lap() {
    const currentTime = Date.now();
    const currentLapTime = currentTime - startTime + elapsedTime;

    const li = document.createElement('li');
    li.className = 'lap-item';
    li.innerHTML = `
        <span>Tour ${lapsList.children.length + 1}</span>
        <span>${formatTime(currentLapTime).replace('<span class="milliseconds">', '').replace('</span>', '')}</span>
    `;

    // On ajoute en haut de la liste (prepend)
    lapsList.prepend(li);
}

resetBtn.addEventListener('click', reset);
lapBtn.addEventListener('click', lap);

---

Test

1. Cliquez sur Start : le chrono défile très vite (.01, .02…).
2. Cliquez sur Tour : une ligne s’ajoute avec le temps figé.
3. Cliquez sur Stop : ça s’arrête.
4. Cliquez sur Start : ça repart de là où c’était (pas de 0).
5. Cliquez sur Stop puis Reset : retour à 00:00.00.