Introducir una hora mediante un widget Javascript

Detalle del widget

Introduce la hora y los minutos en un campo de texto de una página web mediante un componente visual manejado con el ratón o el teclado. Hay 3 versiones de JavaScript: con jQuery, con Prototype y sin framework

Ejemplos

Interfaz de usuario

Usando el ratón:

  • Para mostrar el control haz clic sobre el campo de la hora
  • Para ocultar el control haz clic fuera
  • Para seleccionar el tiempo haz clic en la hora y minuto o arrastra los indicadores

Usando el teclado:

  • Para mostrar el control pulsa la tecla Flecha abajo
  • Para ocultar el control pulsa la tecla Flecha arriba o Enter o ESC o Tabulador
  • Para seleccionar el minuto pulsa Flecha izquierda o Flecha derecha
  • Para seleccionar la hora pulsa Mayúsculas junto a Flecha izquierda o Flecha derecha
  • Para seleccionar en intervalos de 5 minutos pulsa Control junto a Flecha izquierda o Flecha derecha

Instalación

Descarga el archivo clock_widget.7z y descomprímelo dentro de tu web en una subcarpeta llamada clock_widget

Modo de empleo

  1. Vincula el archivo JavaScript:
    • Si usas el framework jQuery vincula a
      <script src="clock_widget/clock_jquery.js"></script>
    • Si usas el framework Prototype vincula a
      <script src="clock_widget/clock_prototype.js"></script>
    • Si no usas ningún framework vincula a
      <script src="clock_widget/clock_standalone.js"></script>
  2. Vincula el archivo CSS:
    <link href="clock_widget/clock.css" rel="stylesheet" type="text/css" />
  3. Añade la clase clock al campo que reciba la hora. Por ejemplo:
    <input type="text" class="clock" />

Revisión del código fuente

Código JavaScript

Hoja de estilos CSS

Imágenes usadas

  • Fuente: clock.svg

  • Indicador de la hora: y del minuto:

Diseños preliminares

  1. Fuente: clock.xcf 120×20 — Primera versión dibujada píxel a píxel con el GIMP

  2. Fuente: clock3.xcf 363×60 — Creada a partir de la imagen anterior escalando al triple sin interpolación. Luego se añadieron 3 píxeles más por la derecha.

  3. Fuente: clock7.xcf 880×200 — Creada a partir de la primera imagen escalando ×7 sin interpolación. La zona activa son los primeros 840 píxeles.

  4. Fuente: clock7b.xcf 880×102 — Reducción de la altura a la mitad. Reflejo vertical de los indicadores.

  5. Fuente: clock7c.xcf 440×102 — Reducción de la anchura a la mitad. La zona activa son los primeros 420 píxeles.

  6. Fuente: svg_clock.svg 440×102 — Vectorizado con InkScape

Comentarios

Proinf.net, ©2003-2017 ci 3.1.6 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL