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.
Copyright 2013, CSSLab.cl – Free under the MIT license. Blackhole Icon from Turbomilk
Comentarios
Perdón por la ignoracia, pero ¿como la agrego a mi sitio web?
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.
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.
No veo nada en la página del demo.