Ejercicio JS – Susto emergente

*{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;
}

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;

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();
}

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().