Mayo 15, 2013
kenneth
En algún momento de cualquier desarrollo, necesitaremos mostrar la fecha y hora en un elemento del DOM, para esta tarea podemos crear un script en JavaScript que se ejecute a la hora de cargar toda la pagina, pero lo ideal seria que nuestra hora se actualice segundo a segundo, y que tengamos un código que puede ser reutilizado en otros proyectos.
Para este caso, crearemos una función en jQuery la cual recibirá un selector como parámetro y este será el elemento del DOM donde se imprimirá la fecha y hora, además se actualizara cada segundo para mostrar la hora, el código se vera de la siguiente manera:
<pre title="Implementar jQuery.displayDateTime()">jQuery.displayDateTime = función(wrapper){
var now = new Date();
var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var date = now.getDate();
var year = now.getFullYear();
var month = now.getMonth();
var day = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
hour = ( hour < 10 )? "0"+hour : hour;
minute = ( minute < 10 )? "0"+minute : minute;
second = ( second < 10 )? "0"+second : second;
var datetime = ''+days[day]+' '+months[month]+' '+date+' '+year+' '+ hour +':'+ minute +':'+ second;
$(wrapper).html(datetime);
setTimeout('jQuery.displayDateTime("'+wrapper+'");','1000');
}La función nos permitirá mostrar la información por medio de un objeto Date de JavaScript. Salva recordar que podemos tener el mismo resultado creando un plugin para jQuery.
El resultado seria un cronometro parecido a la siguiente imagen.
Espero que les sea de mucha ayuda,
Saludos