Untitled
unknown
plain_text
2 months ago
3.1 kB
4
Indexable
// Temps total (30 minutes) en secondes const TOTAL_TIME = 30 * 60; const LOCAL_STORAGE_KEY = "remainingTime"; const SESSION_STORAGE_KEY = "sessionStarted"; let remainingTime; // Fonction pour charger le temps restant depuis Local Storage ou initialiser function loadRemainingTime() { // Si la session a été démarrée, réinitialiser le chrono if (!sessionStorage.getItem(SESSION_STORAGE_KEY)) { sessionStorage.setItem(SESSION_STORAGE_KEY, "true"); return TOTAL_TIME; // Réinitialiser à la valeur initiale } const storedTime = localStorage.getItem(LOCAL_STORAGE_KEY); if (storedTime) { const elapsedTime = Math.floor((Date.now() - JSON.parse(storedTime).timestamp) / 1000); const updatedRemainingTime = JSON.parse(storedTime).remainingTime - elapsedTime; // Si le temps est écoulé, démarrer à zéro return updatedRemainingTime > 0 ? updatedRemainingTime : 0; } return TOTAL_TIME; // Si rien n'est stocké, démarrer avec le temps total } // Fonction pour sauvegarder le temps restant dans Local Storage function saveRemainingTime() { localStorage.setItem( LOCAL_STORAGE_KEY, JSON.stringify({ remainingTime, timestamp: Date.now(), }) ); } // Initialiser le temps restant remainingTime = loadRemainingTime(); // 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; // Sauvegarder le temps restant saveRemainingTime(); // 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."); }
Editor is loading...
Leave a Comment