Untitled
unknown
plain_text
10 months ago
2.8 kB
6
Indexable
// Temps total (30 minutes) en secondes
const TOTAL_TIME = 30 * 60;
const LOCAL_STORAGE_KEY = "remainingTime";
let remainingTime;
// Fonction pour charger le temps restant depuis Local Storage ou initialiser
function loadRemainingTime() {
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