Contagem regressiva para botão de download em HTML e JS

  • Autor Autor CANIBAL
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
CANIBAL

CANIBAL

Épsilon
Verificación en dos pasos activada
Verificado por Binance
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Buenas tardes, hoy les quiero compartir un pequeño pero muy buen código que se que a más de uno le será de utilidad.

Este código lo que hace es poner una cuenta regresiva le los segundos que tú quieras pones y que al llegar a 0 muestre un botón, enlace, imagen o lo que tú quieras mostrar.

Primero que nada el código está sólo en HTML y JS, listo para que puedas poner los estilos que quieras.

URL (MIRALO EN ACCIÓN):

CODIGO COMPLETO:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wait for 5 seconds to see the download button</title>
    <script>
        function countdown() {
            var seconds = document.getElementById("seconds");
            var count = parseInt(seconds.textContent);

            if (count > 0) {
            seconds.textContent = count - 1;
            } else {
            clearInterval(countdownInterval);
            document.getElementById("download-button").style.display = "block";
            }
        }

        var countdownInterval = setInterval(countdown, 1000);
      </script>
</head>
    <body>
        <h1>Wait for 5 seconds to see the download button</h1>
        <p>There are <span id="seconds">5</span> seconds left before the download button is displayed.</p>
        <button id="download-button" style="display: none;">Download File</button>
</body>
</html>
Nota importante: Para editar los segundos sólo cambia el número que está en <span id="seconds">5</span>, eso es todo.
Bien, eso es todo, ya verán ustedes que uso le darán, en mi caso, haré un apartado de descarga que muestre este código y publicidad 🙂
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
¡Hola! Gracias por compartir este código, seguramente le será de mucha utilidad a la comunidad. Recuerda que puedes seguir personalizando y mejorando la funcionalidad y apariencia de este código según tus necesidades específicas. ¡Saludos!
 
Muchas gracias amigo en verdad!
 
Voltar
Topo