Boton ver enlaces con cuenta atras
Vamos a ver como hacer un botón para ver enlaces con cuenta atrás ademas abriremos una ventana emergente popup por si queremos utilizar publicidad (o no).
vamos a usar una función javascript para crear una cuenta atrás y después del tiempo transcurrido mostraremos el contenido, para este ejemplo voy a utilizar 10 segundos que es lo que estamos acostumbrados a ver:
Aquí tenemos la función comentada:
El código completo:
vamos a usar una función javascript para crear una cuenta atrás y después del tiempo transcurrido mostraremos el contenido, para este ejemplo voy a utilizar 10 segundos que es lo que estamos acostumbrados a ver:
Aquí tenemos la función comentada:
if ($('#miboton').val() == 'Mostrar enlaces'){ //Cramos un segundero con inico en 10 segundero = 10; var refresco = setInterval(function(){ segundero=segundero-1; $('#miboton').val(segundero); },1000); //Abrimos una ventana de publicidad window.open('http://adf.ly/',"remote","width=600,height=300,scrollbars=NO"); //A los 10 segundos mostramos el contenido setTimeout(function(){ $('.spoiler').css("display","block"); $('#miboton').val('Ocultar enlaces'); clearInterval(refresco); },10000); } //Ocultar de nuevo el contenido si es visible else if ($('#miboton').val() == 'Ocultar enlaces'){ $('.spoiler').css("display","none"); $('#miboton').val('Mostrar enlaces'); } }si tienes un mínimo conocimiento en javascript seguro que la has entendido a la perfección si no, copia el ejemplo completo que te dejo a continuación en un documento, haz una prueba y veras como funciona:
El código completo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> function ver_enlaces(){ if ($('#miboton').val() == 'Mostrar enlaces'){ //Cramos un segundero con inico en 10 segundero = 10; var refresco = setInterval(function(){ segundero=segundero-1; $('#miboton').val(segundero); },1000); //Abrimos una ventana de publicidad window.open('http://adf.ly/',"remote","width=600,height=300,scrollbars=NO"); //A los 10 segundos mostramos el contenido setTimeout(function(){ $('.spoiler').css("display","block"); $('#miboton').val('Ocultar enlaces'); clearInterval(refresco); },10000); } //Ocultar de nuevo el contenido si es visible else if ($('#miboton').val() == 'Ocultar enlaces'){ $('.spoiler').css("display","none"); $('#miboton').val('Mostrar enlaces'); } } </script> <style type="text/css"> #miboton { width:120px; cursor: pointer; } .divspoiler { text-align: center; } </style> <div class="divspoiler"> <input type="button" value="Mostrar enlaces" id="miboton" onclick="ver_enlaces();" /> <div class="spoiler" style="display: none;"> Aqui el contenido que queremos ocultar </div></div>como pueden ver es algo muy sencillo ;)
17
Puntos
Puntos
3809
Visitas
Visitas
3
Resp
Resp
Por alber hace 110 meses
Administrador
Respuesta #1
Muy bien explicado alber, tal cual como tú dices, con saber un poco de javascript el código se entiende muy bien. Que hace y cuando se hace. ¡5 Puntos!
Respuesta #2
Bien pero he probado con insertar mas de un boton no funciona solo se ejecuta en el primer boton habra solucion para esto
0
Puntos
Puntos
Por jakmm11 hace 97 meses
Principiante
Respuesta #3
Magnífico, pero me gustaría abrir la ventana sin bordes ni barra de navegación, osea como un "modal"
0
Puntos
Puntos
Por Juan Carlos hace 97 meses
Principiante