Tutorial del proyecto JavaScript de reloj digital

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

digital-clock/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Digital Clock</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2>Digital Clock</h2>
    <div class="clock">
      <div>
        <span id="hour">00</span>
        <span class="text">Hours</span>
      </div>
      <div>
        <span id="minutes">00</span>
        <span class="text">Minutes</span>
      </div>
      <div>
        <span id="seconds">00</span>
        <span class="text">Seconds</span>
      </div>
      <div>
        <span id="ampm">AM</span>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Reloj digital

Reloj digital

Créalo a partir del código fuente

Practica con proyectos relacionados

Cuenta regresiva de año nuevo

Calendario Mes

Animación de efecto de texto automático

Cuenta regresiva de año nuevo

Calendario Mes

Animación de efecto de texto automático