//PROYECTO ANIMACION - MIGUEL CARRETAS PERULERO - Funciones setInterval() y setTimeout()
function confirmar() {
    if (confirm("¿Desea usted ver la animación?")) {
        document.getElementById("reloj").style.display = "block";
        document.getElementById("reloj").style.top = "120px";
        document.getElementById("reloj").style.left = "120px";
        setInterval("Ver_Hora()", 1000);
        setInterval("cargando()",1000);
    }
}
function cargando() {
    setTimeout("barra1()", 500);
    setTimeout("barra2()", 600);
    setTimeout("barra3()", 700);
    setTimeout("barra4()", 800);
    setTimeout("barra5()", 900);
    setTimeout("barra6()", 1000);
}
function barra1() {
    document.getElementById("barra1").style.display = "block";
    document.getElementById("barra2").style.display = "none";
    document.getElementById("barra3").style.display = "none";
    document.getElementById("barra4").style.display = "none";
    document.getElementById("barra5").style.display = "none";
    document.getElementById("barra6").style.display = "none";
}
function barra2() {
    document.getElementById("barra1").style.display = "none";
    document.getElementById("barra2").style.display = "block";
    document.getElementById("barra3").style.display = "none";
    document.getElementById("barra4").style.display = "none";
    document.getElementById("barra5").style.display = "none";
    document.getElementById("barra6").style.display = "none";
}
function barra3() {
    document.getElementById("barra1").style.display = "none";
    document.getElementById("barra2").style.display = "none";
    document.getElementById("barra3").style.display = "block";
    document.getElementById("barra4").style.display = "none";
    document.getElementById("barra5").style.display = "none";
    document.getElementById("barra6").style.display = "none";
}
function barra4() {
    document.getElementById("barra1").style.display = "none";
    document.getElementById("barra2").style.display = "none";
    document.getElementById("barra3").style.display = "none";
    document.getElementById("barra4").style.display = "block";
    document.getElementById("barra5").style.display = "none";
    document.getElementById("barra6").style.display = "none";
}
function barra5() {
    document.getElementById("barra1").style.display = "none";
    document.getElementById("barra2").style.display = "none";
    document.getElementById("barra3").style.display = "none";
    document.getElementById("barra4").style.display = "none";
    document.getElementById("barra5").style.display = "block";
    document.getElementById("barra6").style.display = "none";
}
function barra6() {
    document.getElementById("barra1").style.display = "none";
    document.getElementById("barra2").style.display = "none";
    document.getElementById("barra3").style.display = "none";
    document.getElementById("barra4").style.display = "none";
    document.getElementById("barra5").style.display = "none";
    document.getElementById("barra6").style.display = "block";
}
function Ver_Hora() {
    var Hora = new Date();
    var horas = Hora.getHours().toString();
    var minutos = Hora.getMinutes().toString();
    if (minutos.length == 1)
        minutos = "0" + minutos;
    var segundos = Hora.getSeconds().toString();
    if (segundos.length == 1)
        segundos = "0" + segundos;

    document.getElementById("reloj").value = horas + ":" + minutos + ":" + segundos;

}

window.onload = function () {
    document.getElementById("Mostrar").onclick = confirmar;
    document.getElementById("Ocultar").onclick = function () {
        document.getElementById("reloj").style.display = "none";
        clearInterval("Ver_Hora()");
		clearInterval("cargando()");
        document.getElementById("barra1").style.display = "none";
        document.getElementById("barra2").style.display = "none";
        document.getElementById("barra3").style.display = "none";
        document.getElementById("barra4").style.display = "none";
        document.getElementById("barra5").style.display = "none";
        document.getElementById("barra6").style.display = "none";
        
    };
};