Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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:
	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
3864
Visitas
3
Resp
Por alber hace 114 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!
5
Puntos
Por Jose hace 114 meses
Experto Sitio web
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
Por jakmm11 hace 101 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
Por Juan Carlos hace 101 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate