Jnoguera a 09:35, 21 abr 2016

2016-04-21T09:35:20Z

Jnoguera: Es crea la pàgina amb « ».

2016-04-21T09:35:13Z

Es crea la pàgina amb «<source lang="jquery"> </source>».

Pàgina nova

← Versió més antiga		Revisió del 09:35, 21 abr 2016
Línia 1:		Línia 1:
	<source lang="jquery">		<source lang="jquery">
		+
		+	<!Doctype html>
		+
		+	<!-- html[lang="es"]>(head>meta[charset="utf-8"]+title{Ejercicios con jQuery UI}+link2)+(body>script2) -->
		+	<html lang="es">
		+	<head>
		+	<meta charset="utf-8"></meta>
		+	<title>Ejercicios con jQuery UI</title>
		+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		+	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
		+	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
		+
		+	<script>
		+	var contador = 0;
		+	var tiempo = 5;
		+
		+	$(document).ready(function(){
		+	//crear divs desde jQuery
		+	$('body').append('<div class="contador"></div>');
		+	$('body').append('<div class="tiempo"></div>');
		+
		+
		+	$('.respuesta').draggable();
		+	$('.contenedor').droppable({
		+	drop:function(event, ui){
		+	//Aqui dentro se ejecuta la accion
		+	//cuando algo es soltado encima
		+	//event y ui permiten saber qué
		+	//objeto fue soltado encima
		+	var correcta = $(this).attr('data-respuesta');
		+	//ui.draggable = objeto soltado
		+	var valor = ui.draggable.attr('data-valor');
		+	if(correcta==valor){
		+	ui.draggable.slideUp();
		+	$(this).slideUp();
		+	contador+=1;
		+	} else {
		+	contador-=1;
		+	}
		+	$('.contador').html('Contador:'+contador);
		+	}
		+	});
		+
		+	//setInterval es un loop que se ejecuta cada X segs
		+	//1000 milisegundos = 1 segundo
		+	var conteo = setInterval(function(){
		+	tiempo-=1;
		+	$('.tiempo').html('Tiempo restante:'+tiempo);
		+
		+	if(tiempo==0){
		+	alert('PERDISTESSS'); //perdio
		+	clearInterval(conteo); //detener conteo
		+	}
		+
		+	}, 1000);
		+
		+	});
		+	</script>
		+
		+	<style>*{margin:0;padding:0;}
		+
		+	.contenedor{
		+	width:200px;
		+	height:200px;
		+	background-color: #fd0;
		+	margin: 10px;
		+	float:left;
		+	}
		+
		+	.respuesta{
		+	padding: 10px;
		+	background: #888;
		+	float:left;
		+	margin:5px;
		+	}
		+
		+	.tiempo{
		+	position:fixed;
		+	background: #6a7;
		+	left:0;
		+	bottom:0;
		+	padding: 20px;
		+	font-size:2em;
		+	}</style>
		+
		+	</head>
		+	<body>
		+
		+	<!-- .contenedor[data-respuesta=""]#contenedor$*3 -->
		+	<div class="contenedor" data-respuesta="azul" id="contenedor1">Color del cielo</div>
		+	<div class="contenedor" data-respuesta="verde" id="contenedor2">Color del pasto</div>
		+	<div class="contenedor" data-respuesta="azul" id="contenedor3">Color del mar</div>
		+
		+	<!-- .respuesta[data-valor=""]*6 -->
		+	<div class="respuesta" data-valor="rojo">rojo</div>
		+	<div class="respuesta" data-valor="azul">azul</div>
		+	<div class="respuesta" data-valor="amarillo">amarillo</div>
		+	<div class="respuesta" data-valor="verde">verde</div>
		+	<div class="respuesta" data-valor="naranja">naranja</div>
		+	<div class="respuesta" data-valor="azul">azul</div>
		+
		+	</body>
		+	</html>
	</source>		</source>

Sol juego color - Historial de revisió

Jnoguera a 09:35, 21 abr 2016

Jnoguera: Es crea la pàgina amb « ».