in ,

Crear botón con Espera de X segundos JavaScript

Vista previa:

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);
    }
}

Written by Davii

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Crear una ventana modal con HTML, CSS y Javascript