Autor Tema: JavaScript desplazar elementos por la pantalla crear efecto volando CU01165E  (Leído 3448 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenas tardes. Os dejo unas posibles soluciones de los ejercicios de la entrega CU01165E del curso JavaScript.

Ejercicio 1:

Citar
EJERCICIO 1

Crea un script que genere un número aleatorio entre 1 y 100. A continuación debe pedir al usuario que adivine el número. Si el usuario responde un número menor al número aleatorio, debe mostrarse un mensaje “El número es mayor. Inténtelo de nuevo” y dar opción a responder de nuevo. Si el usuario responde un número mayor debe mostrarse un mensaje “El número es menor. Inténtelo de nuevo”. Si el usuario acierta debe mostrarse “Enhorabuena. Ha acertado”. El programa debe terminar si el usuario acierta o si se superan los 30 intentos sin acertar. En caso de superarse los 30 intentos debe mostrarse el mensaje “Ha superado 30 intentos. El programa termina”.

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var numeroAleatorio = Math.floor((Math.random()*100))+1;
var i=0;
alert('Se ha creado un número aleatorio entre 1 y 100.\nIntenta adivinarlo.');
while(i<30 && intento != numeroAleatorio){
var intento = prompt('Tu propuesta es: (Te quedan: '+(30-i)+' intentos)');
if(intento == numeroAleatorio){
alert('Enhorabuena. Ha acertado');
}else if(intento<numeroAleatorio){
alert('El número es mayor. Inténtalo de nuevo.');
}else{
alert('El número es menor. Inténtalo de nuevo.');
}
i++;
}

if(intento != numeroAleatorio){
alert('Ha superado 30 intentos. El programa termina\nEl número es: '+numeroAleatorio);
}

</script>
</head>
<body>

</body>
</html>

El ejercicio 2:

Citar
EJERCICIO 2

Crea un script que pida al usuario el dato de radio en metros de la base de un cilindro y el dato de altura del cilindro. Utilizando la propiedad Math.PI debe realizarse el cálculo para determinar el área de la base del cilindro y el volumen del cilindro y mostrar estos resultados. Consulta en internet si no recuerdas las fórmulas a aplicar. .

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var radio = prompt('Entra el radio:');
var altura = prompt('Entra la altura:');
var areaCilindro = (Math.PI*(Math.pow(radio,2))).toFixed(2);
alert('El área de la base del cilindro es: '+areaCilindro+'m y el volumen del cilindro es: '+(areaCilindro*altura)+'m');

</script>
</head>
<body>

</body>
</html>

Y el ejercicio 3:

Citar
EJERCICIO 3

Crea un script que dé lugar a lo siguiente:

a) En un div con id="volador” debes tener una palabra como <<JavaScript>>.

b) Utilizando las funciones trigonométricas, las propiedades de posicionamiento CSS y funciones para control de animaciones/tiempo debes dar lugar a que dicha palabra se desplace desde la izquierda hasta la derecha de la pantalla siguiendo un movimiento sinusoidal (es decir, subiendo y bajando suavemente describiendo ondas).

El código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
border: solid black;
border-radius: 40px;
position: absolute;
background-color: red;
padding: 15px;
}
#div1{
top: 150px;
}
#div2{
top: 350px;
}
</style>
<script type="text/javascript">

var contador = 0;
var haciaDerecha = true;
var verticalDiv1 = 150;
var verticalDiv2 = 350;

function accion(){
requestAnimationFrame(mover);
}

function mover(){

verticalDiv1 = verticalDiv1+(Math.sin(contador*0.05));
verticalDiv2 = verticalDiv2+(Math.cos(contador*0.05));
div1.style.top = verticalDiv1+"px";
div2.style.top = verticalDiv2+"px";
div1.style.left = contador+"px";
div2.style.left = contador+"px";

var pantalla = (document.body.clientWidth - 100);

if(contador == pantalla){
haciaDerecha = false;
}
if(contador == 0){
haciaDerecha = true;
}

if(haciaDerecha == true){
contador++;
}else{
contador--;
}
requestAnimationFrame(mover);
}

</script>
</head>
<body onload="accion()">
<div id="div1">JavaScript</div>
<div id="div2">JavaScript</div>
</body>
</html>

Para la soluciones del último ejercicio he utilizado las soluciones de los hilos de los campañeros: "pedro,," y "bermartinv".

Gracias.
« Última modificación: 30 de Marzo 2016, 11:26 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola! Todo bien!

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".