count-down

Nom du composant : Gestion avancée des attributs : Ajouter un attribut HTML : <div class="countdown"> <h3>{{eventName}}</h3> <div id="timer">00:00:00</div> </div> CSS : .countdown { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, var(--bgStart), var(--bgEnd)); color: var(--textColor); padding: 20px; border-radius: 15px; text-align: center; } #timer { font-size: 3em; font-weight: bold; letter-spacing: 2px; } JavaScript (connectedCallback) : this.interval = setInterval(() => { const target = new Date(this.getAttribute('targetDate')).getTime(); const now = Date.now(); const diff = target - now; if (diff <= 0) { clearInterval(this.interval); this.shadowRoot.getElementById('timer').textContent = 'Terminé !'; return; } const days = String(Math.floor(diff / (1000 * 60 * 60 * 24))).padStart(2, '0'); const hours = String(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'); const mins = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'); const secs = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0'); this.shadowRoot.getElementById('timer').textContent = `${days}:${hours}:${mins}:${secs}`; }, 1000); JavaScript (render) : Fonctions JavaScript (méthodes supplémentaires) : Générer le composant

🌟 Prévisualisation interactive : Code HTML généré : Code JS généré : 📦 Export multi-framework : -- Choisir un framework -- React Vue Angular Ouvrir dans CodePen Description :