JS - Juego de temporizador

 Añade un temporizador a tu website con JS

Solo hay que copiar y pegar el código.

<!-- TEMPORIZADOR -->

  <div class="marco">

        <div class="tiempo" id="tiempo"></div>

        <div class="botones-contenedor">

          <div class="btn" onclick="iniciar()">

              <img src="https://images.icon-icons.com/1369/PNG/512/-play-arrow_90149.png" alt="">

          </div>

          <div class="btn" onclick="pausar()">

              <img src="https://images.icon-icons.com/1132/PNG/96/1486348534-music-pause-stop-control-play_80459.png" alt="">

          </div>

          <div class="btn" onclick="reiniciar()">

              <img src="https://images.icon-icons.com/2248/PNG/96/restart_icon_135251.png" alt="">

          </div>

        </div>

  </div>

/******* TEMPORIZADOR ******/

.marco {

    display: flex;

    flex-flow: column;

    align-items: center;

    justify-content: center;

    background: rgb(224, 224, 224);

    border: 2px solid black;

    padding: 20px;

}

#tiempo{

    font-size: 2rem;

    border-bottom: 2px solid black;

}

.botones-contenedor{

    display: flex;

}

.botones-contenedor img{

    height: 35px;

    border: 2px solid black;

    border-radius: 50%;

}

.btn {

    cursor: pointer;

    margin: 15px;

}

// JUEGO DE TEMPORIZADOR 10 SEGUNDOS

   let tiempoRef = Date.now()

      let cronometrar = false

      let acumulado = 0

      function iniciar() {

          cronometrar = true

      }

      function pausar() {

          cronometrar = false

      }

      function reiniciar() {

          acumulado = 0

      }

      setInterval(() => {

          let tiempo = document.getElementById("tiempo")

          if (cronometrar) {

              acumulado += Date.now() - tiempoRef

          }

          tiempoRef = Date.now()

          tiempo.innerHTML = formatearMS(acumulado)

      }, 1000 / 60);

      function formatearMS(tiempo_ms) {

          let MS = tiempo_ms % 1000

         

          //Agregué la variable St para solucionar el problema de contar los minutos y horas.

         

          let St = Math.floor(((tiempo_ms - MS) / 1000))

         

          let S = St%60

          let M = Math.floor((St / 60) % 60)

          let H = Math.floor((St/60 / 60))

          Number.prototype.ceros = function (n) {

              return (this + "").padStart(n, 0)

          }

          return H.ceros(2) + ":" + M.ceros(2) + ":" + S.ceros(2)

              + "." + MS.ceros(3)

      }