Reto #7 Forrest Gump

Un cronómetro para Forrest Gump

by didacticode

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Un cronómetro para Forrest Gump</title>
        <link rel="stylesheet" type="text/css" href="Reto07_ForrestGump.css">
        <script src="Reto07_ForrestGump_pulido.js"></script>
	</head>    
        <body>
            <div id="cuadro">
                <div id="reloj"></div>
                <div id="cronometro">00:00:00</div>
                <button id="start">Start</button>
                <button id="stop">Stop</button>
                <button id="reset">Reset</button>
                <h3>Descansos</h3>
                <div id="resultados"></div>
            </div>
        </body>
</html>

CSS

@font-face {
  font-family: "Digital";
  src: url("DS-DIGI.TTF"); /* https://www.dafont.com/es/ds-digital.font */
}
body {
    font-family: Arial;
    color: white;
    background-image: url(forrestgump.jpg);
    background-size: cover;
}
div#cuadro {
    background-color:black;
    width: 500px;
    text-align: center;  
    margin: 0 auto;
    padding: 20px;
}
#reloj,#cronometro {
    background-color: white;
    width: 100px;       
    margin: 0 auto 20px auto;
    padding: 10px;
    font-family: "Digital", sans-serif;
    color: black;
    font-size: 1.3em;
}
button {
    width: 100px;
    height: 30px;
}

JavaScript

let fecha = new Date(); //Variable utilizada para el cronómetro
fecha.setHours(0);
fecha.setMinutes(0);
fecha.setSeconds(0);
fecha.setMilliseconds(0);

let horaActual; //Variable utilizada para el reloj

let cronometro; //En esta variable llevaremos el control de nuestro cronómetro
let intervalo = setInterval(reloj,1000); //Se ejecutará la función que pinta el reloj cada segundo

let parado = true; //Controlamos si el cronómetro está en marcha o no

window.addEventListener("load", inicio, true);
//Asignamos los eventos asociados a los botones tras la carga de la página
function inicio(){
    document.getElementById("start").addEventListener("click", start, true);
    document.getElementById("stop").addEventListener("click", stop, true);
    document.getElementById("reset").addEventListener("click", reset, true);
    reloj(); //Pintamos el reloj al principio; si no, aparece el primer segundo vacío
}

//Esta función muestra la hora actual con un formato de hh:mm:ss
function reloj() {
    horaActual = new Date(); //Fecha actual
    document.getElementById("reloj").innerHTML= rellenar(horaActual.getHours())+":"+rellenar(horaActual.getMinutes())+":"+rellenar(horaActual.getSeconds())+"<br>";
}

//Esta función un cero en caso de que el número pasado por parámetro sea menor que 10
function rellenar(numero) {
    return (numero < 10)?"0"+numero:""+numero;
}

//Esta función actualiza el código html de un elemento pasado por parámetro.
//Necesita dos variables más (fechaHora y mensaje) que necesita para visualizar el mensaje
function imprimir(elemento, fechaHora, mensaje){
    if (elemento!=="resultados"){
        document.getElementById(elemento).innerHTML ="";
    }
    document.getElementById(elemento).innerHTML += mensaje + rellenar(fechaHora.getHours())+":"+rellenar(fechaHora.getMinutes())+":"+rellenar(fechaHora.getSeconds())+"<br/>";
}

//Cuando pulsamos start, comienza la función cronómetro cada 1000 ms (1s)        
function start() {
    if (parado) {
       ...