Ejercicio JS – Susto emergente

Ejercicio JS – Susto emergente

Print Friendly, PDF & Email
Valora esta entrada

En este ejercicio vamos a hacer una ventana emergente una única vez.

Los conceptos que aplicaremos son:

  • Centrado vertical y horizontal de una caja con CSS.
  • Uso de setTimeOut()
  • Creación de un nodo de tipo <audio>.

Vamos a repasarlo mediante un ejercicio.

Enunciado

Haz un documento web que pasados 5 segundos desde su carga haga aparecer una imagen de 600px x 300px  centrada vertical y horizontalmente y que suene el sonido adjunto.

Utiliza el siguiente código html:

<div id="emergente"></div>

Solución del ejercicio

La solución del ejercicio consiste en tener una capa oculta que cuando nos interese mostraremos.

Para conseguir el sonido asignaremos los atributos correspondientes de la etiqueta <audio> en el momento adecuado.

Código CSS usado

*{margin:0;padding:0;box-sizing:border-box;}
#emergente{
    position:absolute;
    width:600px;
    height:300px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-300px;
    background:url(susto.jpg) 0 0 no-repeat;
    box-shadow: 0px 0px 50px #000;
    border-radius: 10px;
    display:none;
}

Explicación del código CSS

El código CSS describe una caja centrada vertical y horizontalmente con un fondo en la que encontramos la imagen adjunta en el ejercicio. La imagen está en la raíz de proyecto al mismo nivel que el documento index.html.

Para estilizar un poco la imagen y dar un efecto más flotante se aplican las propiedades box-shadow y border-radius.

Inicialmente la capa está oculta con display:none;

Código JS usado

window.onload = init;
function init(){
    setTimeout(susto,2000);
}

function susto(){
    document.getElementById("emergente").style.display="block";

    sonido = document.createElement("audio")
    sonido.src="dragonBall.mp3";
    document.getElementById("emergente").appendChild(sonido);
    sonido.play();
}

Explicación del código javascript

Cuando se termina de cargar todo el documento se carga la función init. (fijaros que no lleva paréntesis para que javascript se espere a la carga completa del documento)

Dentro de la función init(){} se ejecuta a los 2 segundos la función sonido.

La función sonido modifica en primer lugar la propiedad display de la capa para hacerla visible.

En segundo lugar crea un nodo de tipo audio y al que asigna el atributo src.

Finalmente se ejecuta .play().

Si juntamos todas las piezas resolvemos el ejercicio.

OBSERVACIÓN IMPORTANTE: Notar que Chrome bloquea la reproducción de sonido mediante javascript. La solución propuesta reproduce el sonido en Safari y en Mozilla pero no en Chrome. La explicación oficial que se encuentra en los foros de Developpers de Google es que de este modo se evita que para las versiones teléfono haya tanto consumo de datos i/o que se reproduzcan sonidos en momentos poco orportunos.

¡Hola!

Querido lector,

¿Te animas a hacer el mismo ejercicio pero con un formulario de suscripción a una newsletter?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.