Exámenes - Reloj

Reloj - Comentarios

• El programa debe:
  • Mostrar una hora en formato numérico, al azar entre las 00:00 y las 11:59 (con dos cifras).
  • Mostrar un reloj de manecillas que indique la misma hora:
    • La manecilla de las horas apuntará a la posición correspondiente a la hora, sin tener en cuenta los minutos.
    • La manecilla de los minutos apuntará a la posición correspondiente a los minutos.
• Al actualizar la página, se mostrará una hora distinta (aunque al generarse al azar puedan repetirse ocasionalmente)
• El argumento de la transformación CSS rotate() es un valor entero entre 0 y 360 que representa el ángulo con la vertical (la posición de las 0 horas o de los 0 minutos).
• Capturas de pantalla de ejemplo:

  

  

  

Reloj - Ejemplos de código HTML

  <h2>Son las 00:11</h2>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="220" height="220" viewBox="-110 -110 220 220">
      <circle cx="0" cy="0" r="100" fill="white" stroke="black" stroke-width="5" />
      <line x1="0" y1="0" x2="0" y2="-60" stroke="black" stroke-width="5" transform="rotate(0, 0, 0)" />
      <line x1="0" y1="0" x2="0" y2="-80" stroke="black" stroke-width="5" transform="rotate(66, 0, 0)" />
    </svg>
  </p>

  <h2>Son las 02:15</h2>

  <p>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
      width="220" height="220" viewBox="-110 -110 220 220">
      <circle cx="0" cy="0" r="100" fill="white" stroke="black" stroke-width="5" />
      <line x1="0" y1="0" x2="0" y2="-60" stroke="black" stroke-width="5" transform="rotate(60, 0, 0)" />
      <line x1="0" y1="0" x2="0" y2="-80" stroke="black" stroke-width="5" transform="rotate(90, 0, 0)" />
    </svg>
  </p>

Reloj - Ejemplo de programa

Nota: El día del examen los alumnos no tienen acceso a este ejemplo, solamente tienen acceso a las capturas del apartado anterior.

Un ejemplo de programa puede probarse en la ventana siguiente: