Crear botón con Espera de X segundos JavaScript

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO
close