Mon code pour le timer, Avec un petit design que j'ai ajouté en plus

Question

// La partie JS // let secondes = 10 let interval ma_div = document.querySelector('div') function decompte(){ secondes -= 1 if(secondes>0){ let a = document.createElement('a'); a.textContent = secondes a.classList.add("paragraphe") ma_div.appendChild(a) }else{ stop(); } } function start(){ interval = setInterval("decompte()",1000) } function stop(){ clearInterval(interval); let fin = document.createElement('p'); fin.textContent = "STOP!" fin.classList.add("paragraphe") ma_div.appendChild(fin) } btn = document.querySelector('button'); btn.addEventListener('click',()=>{ secondes = 10; ma_div.textContent = "" start() }) // HTML Document

// CSS body{ display: flex; /* justify-content: center; */ flex-direction: column; align-items: center; height: 100vh; } button{ padding: 10px; border: none; border-radius: 5px; box-shadow: 0 0 5px #717171; font-size: 18px; font-weight: bold; color: #717171; cursor: pointer; margin-bottom: 20px; } .paragraphe{ color: rgb(104, 146, 123); font-size: 30px; font-weight: bold; color: rgb(96, 96, 247); text-shadow: 0 0 2px #444; } div{ height: auto; border-radius: 7px; box-shadow: 0 0 5px #444; padding: 20px; display: flex; align-items: center; flex-direction: column; width: 150px; }

Louis-Nicolas Leuillet · Accepted Answer

Salut Daniel, Bon, ton code fonctionne bien dans l'ensemble, c'est du beau travail ! J'ai juste quelques remarques pour l'améliorer. Déjà, évite d'utiliser une chaîne de caractères dans setInterval . Plutôt que setInterval("decompte()", 1000) , préfère setInterval(decompte, 1000) . Passer une chaîne c'est une vieille syntaxe qui utilise eval() en interne, ce qui n'est pas recommandé pour des raisons de performance et de sécurité. Autre point : tu affiches les chiffres de 9 à 1 mais jamais le 10 initial. Ta condition if(secondes > 0) fait que tu n'affiches rien quand secondes vaut 0, ce qui est bien, mais tu perds le premier affichage. Tu pourrais afficher le 10 avant de lancer l'intervalle : btn.addEventListener('click', () => { secondes = 10; ma_div.textContent = ""; // Afficher 10 immédiatement let a = document.createElement('a'); a.textContent = secondes; a.classList.add("paragraphe"); ma_div.appendChild(a); start(); }); Dernier détail : pense à déclarer btn et ma_div avec let ou const . Sans ça, elles deviennent des variables globales implicites, ce qui peut créer des bugs difficiles à traquer dans des projets plus gros. Sinon l'idée d'utiliser des balises pour les chiffres est originale, même si sémantiquement des ou

seraient plus appropriés puisque ce ne sont pas des liens. Mais ça marche !

Daniel Cephas Adié · Answer

Très bien reçu. Je vais essayer cette approche.

Mon code pour le timer, Avec un petit design que j'ai ajouté en plus

Formation JavaScript (legacy)