datetime ticker

html

<article class="clock">
	<ul>
		<li class="time">
			<h1>time</h1>
			<time>
				<span class="hours"></span>
				<span class="minutes"></span>
				<span class="seconds"></span>
			</time>
		</li>
		<li class="date">
		<h1>date</h1>
			<time>
				<span class="date"></span>
				<span class="day"></span>
				<span class="month"></span>
				<span class="year"></span>
			</time>
		</li>
	</ul>
</article>

script

// uses jQuery for element selectors only

datetime = {
	months : ["January","February","March","April","May","June","July","August","September","October","November","December"],
	days : ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
	
	pad2 : function(number) {
		 return (number < 10 ? '0' : '') + number
	},
	
	//date time ticker
	dateTime : function() {
	
		var clock = $('.clock');
		
		setInterval(function(){
			var now = new Date(),
			h = parseInt(now.getHours()),
			m = parseInt(now.getMinutes()),
			s = parseInt(now.getSeconds());
			
			d = parseInt(now.getDate());
			dd = panic.days[parseInt(now.getDay())];
			mm = panic.months[parseInt(now.getMonth())];
			y = parseInt(now.getFullYear());
			
			clock.find('.year').text(y);
			clock.find('.month').text(datetime.pad2(mm));
			clock.find('.date .date').text(dd);
			clock.find('.day').text(d);
			clock.find('.hours').text(datetime.pad2(h));
			clock.find('.minutes').text(datetime.pad2(m));
			clock.find('.seconds').text(datetime.pad2(s));
		
		}, 1000);
	
	}
	
	
}

datetime.init();