jQuery dayTimr

9/ene/2013 4

jQuery dayTimr

Toma y utiliza la hora del día actual del usuario para hacer cualquier cosa a la página actual usando un simple callback. Sólo eso. ¡Funciona hasta en IE!

Get and uses the user’s current time of the day to do anything to the current page using a simple callback. Just that. Even works in IE!

Selecciona tu idioma / Select your language:

EN

Use:

$(function(){
   $('body').dayTimr();  // use any HTML element
});

Settings:

$('body').dayTimr({
	'nightClass' : 'night',         // name of the class used if it is night time
	'nightStart' : '21:00',         // time when night starts, must be HH:MM (if it is >= 9 don't use the 0)
	'dawnClass' : 'dawn',           // name of the class used if it is dawn time
	'dawnStart' : '0:00',           // time when dawn starts, must be HH:MM (if it is >= 9 don't use the 0)
	'morningClass' : 'morning',     // name of the class used if it is morning time
	'morningStart' : '7:00',        // time when morning starts, must be HH:MM (if it is >= 9 don't use the 0)
	'afternoonClass': 'afternoon',  // name of the class used if it is afternoon time
	'afternoonStart': '12:00',      // time when afternoon starts, must be HH:MM (if it is >= 9 don't use the 0)
	'debug' : false,                // if true show what's going on in the browser's console
	onNight : function(){},         // callback if it is night; default it adds the nightClass to the body
	onDawn : function(){},          // callback if it is dawn; default it adds the dawnClass to the body
	onMorning : function(){},       // callback if it is morning; default it adds the morningClass to the body
	onAfternoon : function(){}      // callback if it is afternoon; default it adds the afternoonClass to the body
});
Changelog:
  • 1.0: now you can choose your behavior through the callback.
  • 0.4.1: BUG: onMorning.call fixed.
  • 0.4: First public release.

ES

Toma y utiliza la hora del día actual del usuario para hacer cualquier cosa a la página actual a través de un callaback. Sólo eso.

Uso:

$(function(){
   $('body').dayTimr();  // puedes utilizar cualquier elemento HTML
});

Configuración:

$('body').dayTimr({
	'nightClass' : 'night',         // nombre de la clase si es de noche
	'nightStart' : '21:00',         // hora cuando comienza la noche, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0)
	'dawnClass' : 'dawn',           // nombre de la clase si es de madrugada
	'dawnStart' : '0:00',           // hora cuando comienza la madrugada, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0)
	'morningClass' : 'morning',     // nombre de la clase si es de mañana
	'morningStart' : '7:00',        // hora cuando comienza la mañana, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0)
	'afternoonClass': 'afternoon',  // nombre de la clase si es de tarde
	'afternoonStart': '12:00',      // hora cuando comienza la tarde, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0)
	'debug' : false,                // si es true muestra lo que hace el plugin por la consola
	onNight : function(){},         // callback si es de noche; por defecto inyecta al body la clase definida en nightClass
	onDawn : function(){},          // callback si es de madrugada; por defecto inyecta al body la clase definida en dawnClass
	onMorning : function(){},       // callback si es de mañana; por defecto inyecta al body la clase definida en morningClass
	onAfternoon : function(){}      // callback si es de tarde; por defecto inyecta al body la clase definida en afternoonClass
});
Cambios:
  • 1.0: ahora puedes definir el comportamiento a través del callback.
  • 0.4.1: BUG: onMorning.call solucionado.
  • 0.4: Primera publicación.

Demo/Ejemplo

Download/Bajar Plugin

Copyright 2013, CSSLab.cl – Free under the MIT license. Blackhole Icon from Turbomilk

Comentarios

  1. Alberto [#]

    Perdón por la ignoracia, pero ¿como la agrego a mi sitio web?

  2. Phil [#]

    A primera vista pensaba que se podía pintar la hora poniendo una clase a un tag html cualquiera pero no.
    Solo se trata de ver el sol y el background cambiando en función de la hora del día verdad?

    A parte de esto, he descargado el plugin y me sale un error js en la linea settings.onMorningcall(this); porque falta el ‘.’ entre Morning y call –> settings.onMorning.call(this);

    Para acabar, te felicito por tu trabajo en esa web porque hay cosas muy interesantes e utiles.

    Saludos,
    Phil.

  3. Jorge Epuñan [#]

    Gracias Phil por el bug, solucionado y subido en nueva version. La idea del plugin no es poner un reloj explicitamente sino permitir manipular elementos determinados por rangos de horas del dia.

    El sol y el color de fondo se dibujan deacuerdo a la class inyectada segun sea la hora del dia; eventualmente puedes hacer lo que quieras, con el callback puedes inyectar un video por ejemplo si es mañana, tarde o noche; enfin.

    Salu2.

  4. Cotelandia [#]

    No veo nada en la página del demo.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab