Archive for May, 2012

How To Create Live Date/Time (Clock) Display Using jQuery

A while ago I’ve added a live clock to the website which I’m currently developing, and I find it pretty nice on the right top most header portion of the site. I think maybe someone out may want to try it out.

Dependency: jQuery


Below script is my live clock function that will display date time formatted month/day/year hour:minutes:seconds. For now I will just leave this code here, beacuase ahmm too lazy to explain things :P

< script type = "text/javascript" >
var liveClock = function ( servertime ) {
var currDateTime = servertime ;
var addLeadingZero = function ( s ) {
return ( s < 10 ) ? ( '0' + s ) : s ;
} ;
var formattedDate = function ( date ) {
var h = date. getHours ( ) , hour = ( h < 1 ) ? ( h + 1 ) : ( ( h > 12 ) ? ( h - 12 ) : h ) , a = ( h < 12 ) ? 'am' : 'pm' ;
return ( date. getMonth ( ) + 1 ) + '/' + date. getDate ( ) + '/' + date. getFullYear ( ) + ' ' + hour + ':' + addLeadingZero ( date. getMinutes ( ) ) + ':' + addLeadingZero ( date. getSeconds ( ) ) + a ;
} ;
var setDateTime = function ( ) {
currDateTime. setSeconds ( currDateTime. getSeconds ( ) + 1 ) ;
$ ( '#server-time' ) . html ( formattedDate ( currDateTime ) ) ;
return false ;
} ;
var everySec = setInterval ( setDateTime , 1000 ) ;
} ;
liveClock ( server_time ) ;
</ script >

note: #server-time is the id of that html element where you want to display the clock, and oh don’t forget to include jquery :D . thanks! let me know what you think!

Be the first to comment - What do you think?
Posted by Mark Anthony Sabandal - May 1, 2012 at 5:41 am

Categories: Uncategorized Tags: