Compte à rebours de 10 secondes dans un élément

Publié le 15 décembre 2024

JavaScript

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compte à rebours</title>
</head>
<body>
    <h2 class="message"></h2>

    <script>
        let countdown = 10; // Durée du compte à rebours en secondes
        const messageElement = document.querySelector('.message');

        const interval = setInterval(() => {
            messageElement.textContent = `Temps restant : ${countdown} secondes`;
            countdown--;

            if (countdown < 0) {
                clearInterval(interval);
                messageElement.textContent = "Temps écoulé !";
            }
        }, 1000); // Met à jour toutes les secondes
    </script>
</body>
</html>

Explication du code :

HTML : Un élément <h2> avec la classe message est créé pour afficher le compte à rebours.
JavaScript :

Une variable countdown est initialisée à 10.
document.querySelector('.message') sélectionne l’élément <h2> pour y afficher le texte.
setInterval est utilisé pour exécuter une fonction toutes les secondes (1000 millisecondes).
À chaque intervalle, le texte de l’élément est mis à jour avec le temps restant.
Lorsque le compte à rebours atteint 0, l’intervalle est arrêté avec clearInterval, et un message « Temps écoulé ! » est affiché.

Adaptation :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Syncrodestinée</title>
    <link rel="stylesheet" href="css/theme.css">
    <source src="assets/audio/the-chimes.mp3" type="audio/mpeg">
    <source src="assets/audio/singing-bowl.mp3" type="audio/mpeg">
</head>
<body>
    <header>
       
    </header>
    <main>
          <div class="start" id="hide"> 
            <button id="meditation">Méditation</button>
            <h2 class="message"></h2>
          </div>
    </main>
        
<footer>
   
</footer>
    <script src="script.js"></script>
</body>
</html>

let inputUser = prompt('Entrez votre temps de médiation souhaité (ex:20 pour 20 min ...')
let medDuration = inputUser * 10000;
let countdown = 10;

const message = document.querySelector('.message')


const med = document.getElementById('meditation');
meditation.addEventListener('click', timing)

const audioStart = new Audio()
const soundStart = {
  src:"assets/audio/the-chimes.mp3"
}

const audioStop = new Audio()
const soundStop = {
  src:"assets/audio/singing-bowl.mp3"
}

function timing() {
  setTimeout(messageDisplay,0)
  setTimeout(medStart, 10000);
  setTimeout(medStop, medDuration);/*timing test*/
}
function messageDisplay() {
  const interval = setInterval(() => {
   
    message.innerHTML = `la méditation commence dans : ${countdown} secondes`;
    if (countdown < 10) {
      message.innerHTML = `la méditation commence dans : 0${countdown} secondes`;
    }
    countdown--;
  
    if (countdown < 0) {
        clearInterval(interval);
        message.style.display ='none';;
    }
  }, 1000)
}
function medStart() {
  audioStart.src = soundStart.src
  audioStart.play()
 
}
function medStop() {
  audioStop.src = soundStop.src
  audioStop.play()
}

Factorisation :

Voici quelques suggestions pour le rendre plus propre :

Regrouper les éléments audio dans une fonction : Vous pouvez créer une fonction pour initialiser et jouer les sons.
Utiliser des constantes pour les durées : Cela rend le code plus facile à modifier et à comprendre.
Éviter la répétition dans messageDisplay : Vous pouvez simplifier la logique d’affichage du message.

let inputUser = prompt('Entrez votre temps de méditation souhaité (ex:20 pour 20 min ...');
let medDuration = inputUser * 60000; // Correction : 1 minute = 60000 ms
let countdown = 10;

const message = document.querySelector('.message');
const audioStart = new Audio("assets/audio/the-chimes.mp3");
const audioStop = new Audio("assets/audio/singing-bowl.mp3");

const med = document.getElementById('meditation');
med.addEventListener('click', timing);

function timing() {
    countdown = 10; // Réinitialiser le compte à rebours
    message.style.display = 'block'; // Afficher le message
    messageDisplay();
    setTimeout(medStart, countdown * 1000); // Démarrer le son après le compte à rebours
    setTimeout(medStop, medDuration); // Démarrer l'arrêt après la durée de méditation
}

function messageDisplay() {
    const interval = setInterval(() => {
        message.innerHTML = `La méditation commence dans : ${countdown < 10 ? '0' : ''}${countdown} secondes`;
        countdown--;

        if (countdown < 0) {
            clearInterval(interval);
            message.style.display = 'none';
        }
    }, 1000);
}

function medStart() {
    audioStart.play();
}

function medStop() {
    audioStop.play();
}

Changements apportés :

Correction de la durée de méditation : J’ai corrigé la conversion de minutes en millisecondes (1 minute = 60000 ms).
Réinitialisation du compte à rebours : Le compte à rebours est réinitialisé à 10 chaque fois que la fonction timing est appelée.
Affichage du message : La logique d’affichage du message a été simplifiée en utilisant une expression conditionnelle pour ajouter un zéro devant les nombres inférieurs à 10.
Suppression des objets soundStart et soundStop : Les chemins des fichiers audio sont directement passés lors de la création des objets Audio, ce qui simplifie le code.

Cette version est plus concise et plus facile à lire tout en conservant la même fonctionnalité.