Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: pedro,, en 15 de Noviembre 2015, 00:38
-
Hola, aquí mi resolución al ejercicio CU01161E.
EJERCICIO 1
Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una tecla>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Utiliza el evento keypress para determinar el carácter que el usuario ha escrito utilizando el teclado y haz que se muestre dentro del div con un tamaño de fuente de 250px.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#caja{border:solid 2px; width:400px; height:400px; margin:100px; font-size:250px; text-align:center;}
</style>
<script type="text/javascript">
window.onload = function() {
document.onkeypress = mostrarInformacionTecla;
}
function mostrarInformacionTecla(eventoObj){
var caracter = String.fromCharCode(eventoObj.which);
caja.innerHTML = caracter;
}
</script>
</head>
<body>
<h1> Pulsa una tecla </h1>
<div id="caja"></div>
</body>
</html>
EJERCICIO 2
Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una flecha>>, y un div central de 300 por 300 px con borde color negro, color de fondo amarillo y márgenes de 200px en todas direcciones. Inicialmente el cuadrado que define el div debe estar alineado en el centro de la ventana. Utiliza el evento keyup para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando CSS haz que el cuadrado que define el div se desplace 20px en la dirección de flecha elegida por el usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la ventana, hacia la derecha.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#caja{border:solid 2px; background-color:yellow; width:300px; height:300px; position:absolute; margin: 200px;}
</style>
<script type="text/javascript">
window.onload = function() {
document.onkeyup = moverDiv;
}
function moverDiv(eventoObj){
var teclaPulsada = eventoObj.keyCode;
if(teclaPulsada==37){
var nuevaPosicion = document.getElementById('caja').offsetLeft;
document.getElementById('caja').style.left = nuevaPosicion - 220 + 'px';
}else if(teclaPulsada==38){
var nuevaPosicion = document.getElementById('caja').offsetTop;
document.getElementById('caja').style.top = nuevaPosicion - 220 + 'px';
}else if(teclaPulsada==39){
var nuevaPosicion = document.getElementById('caja').offsetLeft;
document.getElementById('caja').style.left = nuevaPosicion - 180 + 'px';
}else if(teclaPulsada==40){
var nuevaPosicion = document.getElementById('caja').offsetTop;
document.getElementById('caja').style.top = nuevaPosicion - 180 + 'px';
}else{
alert('La tecla pulsada no es correcta');
}
}
</script>
</head>
<body>
<h1> Pulsa una flecha </h1>
<div id="caja"></div>
</body>
</html>
En el ejercicio 2, no fuí capaz de centrar el div, debido a que como tiene que llevar 200px de margen por todos sus lados, no encontré ninguna forma de hacerlo.
Saludos.
-
Hola Pedro!
El ejercicio 1 lo veo bien resuelto
El ejercicio 2 también. Si se quiere conseguir una animación más "realista" podemos cambiar document.onkeyup = moverDiv; por document.onkeypress = moverDiv; de este modo el div se mueve manteniendo pulsada la tecla flecha sin necesidad de pulsar cada vez que queramos moverlo. El centrado del div teniendo este margins es más complejo de lo que parece por lo que modificaremos el enunciado para no exigir este punto.
Saludos!