como hacer -> Clic en boton, esperar 5 segundos...

  • Autor Autor gusta1996
  • Fecha de inicio Fecha de inicio
gusta1996

gusta1996

VIP
Delta
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Hola betas soy novato en JS
Por favor necesito ayuda con un botón que quiero hacer

Mi idea es tener un boton que dice "Descargar" y que tiene 2 etiquetas <a> cada uno con 1 enlace diferente
  1. Al principio el boton solo muestra el texto "Descargar" con el enlace 1 <a>
  2. Luego cuando un usuario hace clic en el boton, el boton envia al enlace 1, y al mismo tiempo el boton cambia el texto por "espere x segundos..."
  3. "espere x segundos.." es un conteo regresivo, cuando el conteo termina el boton cambiar el enlace 1 por el enlace 2, y el texto dira"click aqui"
esto es lo que tengo hasta ahora (tengo 2 botones)

Insertar CODE, HTML o PHP: 
<style>
.button-hidden {
    display: none;
}
</style>

<button class="button-descarga">
    <a id="click-ad-url" class="" onclick="clickDownload()" href="https://enlace-1.com" target="_blank" rel="nofollow">
        Descargar
    </a>
    <p id="p-text-espere" class="button-hidden">
        Espere&nbsp;<span id="span-text-espere">5</span>&nbsp;segundos...</p>
    <a id="click-descarga" class="button-hidden" href="https://enlace-2.com" target="_blank" rel="nofollow">
        Click aquí
    </a>
</button>

gracias de antemano
 
Tal vez te sirva este código que programé, te muestra un botón, lo presionas, lo oculta, corre un contador atrás por 5 segundos y ahora te da el enlace real.

<html>
<head>
<script language="JavaScript">
<!--

var seconds = 5;

function clickDownload()
{

document.getElementById("click-ad-url").style.display = "none";
document.getElementById("click-ad-url").style.visibility = "hidden";

document.getElementById("p-text-espere").style.display = "block";
document.getElementById("p-text-espere").style.visibility = "visible";
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("p-text-espere").style.visibility = "hidden";

document.getElementById("click-descarga").style.display = "block";
document.getElementById("click-descarga").style.visibility = "visible";

}
else
{

seconds--;
document.getElementById("p-text-espere").innerText = "Espere " + (seconds).toString() + " segundos...";
setTimeout("runcountdown();", 1000);

}

}

-->
</script>
<body>

<button id="click-ad-url" onclick="javascript:clickDownload();">Descargar</button>
<div id="p-text-espere" style="display: none; visibility: hidden;"></div>
<a id="click-descarga" style="display: none; visibility: hidden;" href="https://enlace-2.com" target="_blank" rel="nofollow">Descargar ahora</a>

</body>
</html>
Hacer clic para expandir...
 
marjuanm dijo:
Tal vez te sirva este código que programé, te muestra un botón, lo presionas, lo oculta, corre un contador atrás por 5 segundos y ahora te da el enlace real.
Hacer clic para expandir...
Hola Muchas gracias,
Necesitaba algo como esto,
¿Se puede abrir el enlace en una Nueva pestaña?
 
lo probé en Chrome, Firefox, Edge y hasta en Internet Explorer (aún está instalado en mi pc) y en todos abre el link en una pestaña nueva (supongo es el comportamiento predeterminado), pero si quieres que abra en una ventana aparte (no se si es a lo que te refieres) puedes usar este código:

<html>
<head>
<script language="JavaScript">
<!--

var seconds = 5;

function clickDownload()
{

document.getElementById("click-ad-url").style.display = "none";
document.getElementById("click-ad-url").style.visibility = "hidden";

document.getElementById("p-text-espere").style.display = "block";
document.getElementById("p-text-espere").style.visibility = "visible";
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("p-text-espere").style.visibility = "hidden";

document.getElementById("click-descarga").style.display = "block";
document.getElementById("click-descarga").style.visibility = "visible";

}
else
{

seconds--;
document.getElementById("p-text-espere").innerText = "Espere " + (seconds).toString() + " segundos...";
setTimeout("runcountdown();", 1000);

}

}

function newwindow(url)
{
window.open(url, "_blank", "width=800, height=600, toolbar=yes");
}

-->
</script>
<body>

<button id="click-ad-url" onclick="javascript:clickDownload();">Descargar</button>
<div id="p-text-espere" style="display: none; visibility: hidden;"></div>
<a id="click-descarga" style="display: none; visibility: hidden;" href="javascript:newwindow('https://enlace-2.com');" rel="nofollow">Descargar ahora</a>

</body>
</html>
Hacer clic para expandir...
Puedes checar los parámetros de una nueva ventana aquí https://www.w3schools.com/jsref/met_win_open.asp

Pd. Gracias por la donación.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

J
Tutorial: Sé que usted está harto /a de esperar 5 segundos para obtener el enlace de descarga
2
Respuestas
37
Visitas
3K
Yuads
Y
Atrás
Arriba