Pasos para crear un botón que muestre una Espera de X segundos con JavaScript
Aplicamos HTML:
Creamos un div para el conteo regresivo y 2 botones, uno que se mostrará al principio para hacer clic y el otro se mostrar después de que el conteo regresivo acabe
<center> <button id="click-ad-url" onclick="clickDownload();" class="btn">Clic aquí</button> <div id="p-text-espere" class="btn-hidden"></div> <button id="click-descarga" class="btn btn-hidden"> <a href="https://enlace.com" target="_blank" rel="nofollow noopener">Descargar ahora</a> </button> </center>
Aplicamos CSS:
Colores y padding para los botones, etc.
.btn { background: #26aef2; padding: 10px 25px; color: #ffffff; border-radius: 50px; } .btn a { color: #ffffff; } .btn-hidden { display: none; }
Aplicamos JAVASCRIPT:
var seconds = 5; function clickDownload() { document.getElementById("click-ad-url").style.display = "none"; document.getElementById("p-text-espere").style.display = "block"; document.getElementById("p-text-espere").innerText = "Espere 5 segundos..."; setTimeout("runcountdown();", 1000); } function runcountdown() { if(seconds <= 0) { document.getElementById("p-text-espere").style.display = "none"; document.getElementById("click-descarga").style.display = "block"; } else { seconds--; document.getElementById("p-text-espere").innerText = "Espere " + (seconds).toString() + " segundos..."; setTimeout("runcountdown();", 1000); } }
See the Pen Crear botón con Espera de X segundos JavaScript by Gustavo (@gusta1996) on CodePen.