Untitled
unknown
plain_text
5 months ago
3.6 kB
4
Indexable
<style> /* Contenitore principale del timer */ .final-timer-container { font-family: Arial, sans-serif; background-color: #ffffff; padding: 10px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; width: 100%; max-width: 500px; margin: 0 auto; } /* Titolo del timer */ .final-timer-title { font-size: 2.5em; font-weight: bold; margin: 0 0 5px 0; color: #333333; } /* Timer */ .final-timer { font-size: 4em; font-weight: bold; color: #FF0000; margin: 0 0 10px 0; text-align: center; } /* Sfondo della barra di progresso */ .final-progress-bar-background { width: 100%; background-color: #ddd; border-radius: 25px; overflow: hidden; height: 45px; border: 3px solid #FF9800; position: relative; } /* Riempimento della barra di progresso */ .final-progress-bar-fill { height: 100%; width: 100%; background: linear-gradient( 90deg, #FF9800 0%, #ffd026 50%, #FF9800 100% ); background-size: 200% 100%; animation: continuousMove 2s linear infinite; transition: width 1s linear; } /* Animazione uniforme */ @keyframes continuousMove { from { background-position: 200% 0; } to { background-position: 0 0; } } /* Responsività */ @media (max-width: 480px) { .final-timer-container { padding: 8px; } .final-timer-title { font-size: 2em; margin: 0 0 4px 0; } .final-timer { font-size: 3em; margin: 0 0 8px 0; } .final-progress-bar-background { height: 35px; } } </style> <div class="final-timer-container"> <div class="final-timer-title">La oferta es válida por:</div> <div class="final-timer" id="final-timer">04:30</div> <div class="final-progress-bar-background"> <div class="final-progress-bar-fill" id="final-progress-bar"></div> </div> </div> <script> (function() { // Durata totale in secondi const totalTime = 270; // 4 minuti e 30 secondi let timeLeft = totalTime; const timerElement = document.getElementById('final-timer'); const progressBar = document.getElementById('final-progress-bar'); // Funzione per aggiornare il timer e la barra di progresso function updateTimer() { if (timeLeft <= 0) { clearInterval(countdown); timerElement.textContent = "¡Tiempo agotado!"; progressBar.style.width = '0%'; return; } // Calcola minuti e secondi rimanenti const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; // Formatta il tempo con zero iniziale se necessario const formattedTime = String(minutes).padStart(2, '0') + ":" + String(seconds).padStart(2, '0'); timerElement.textContent = formattedTime; // Calcola la percentuale rimanente const percent = (timeLeft / totalTime) * 100; progressBar.style.width = percent + '%'; timeLeft--; } // Avvia il countdown updateTimer(); // Aggiorna immediatamente const countdown = setInterval(updateTimer, 1000); })(); </script>
Editor is loading...
Leave a Comment