Untitled

 avatar
unknown
plain_text
2 months ago
1.8 kB
5
Indexable
// Temps total (30 minutes) en secondes
const TOTAL_TIME = 30 * 60;
let remainingTime = TOTAL_TIME;

// Sélection de l'élément timer et du cercle de progression
const timerElement = document.getElementById("timer");
const circleProgress = document.querySelector(".circle-progress");

// Vérification que l'élément existe
if (timerElement && circleProgress) {
    // Mettre à jour l'affichage du timer
    function updateTimer() {
        // Si le temps est écoulé, arrêter le chronomètre
        if (remainingTime <= 0) {
            clearInterval(timerInterval);
            timerElement.textContent = "00:00:00";
            circleProgress.style.strokeDashoffset = "0"; // Cercle entièrement rempli
            return;
        }

        // Calculer les minutes et secondes restantes
        const minutes = Math.floor(remainingTime / 60);
        const seconds = remainingTime % 60;

        // Formater les minutes et secondes en ajoutant des zéros au besoin
        const formattedMinutes = String(minutes).padStart(2, "0");
        const formattedSeconds = String(seconds).padStart(2, "0");

        // Mettre à jour l'affichage du timer
        timerElement.textContent = `00:${formattedMinutes}:${formattedSeconds}`;

        // Mettre à jour le cercle de progression
        const progress = (remainingTime / TOTAL_TIME) * 113; // Proportion du cercle
        circleProgress.style.strokeDashoffset = progress;

        // Décrémenter le temps restant
        remainingTime--;
    }

    // Mettre à jour le timer toutes les secondes
    const timerInterval = setInterval(updateTimer, 1000);

    // Initialiser l'affichage immédiatement
    updateTimer();
} else {
    console.error("Erreur : L'élément avec l'ID 'timer' ou le cercle de progression est introuvable dans le DOM.");
}
Leave a Comment