JavaScript Clock

It's a JavaScript Clock that has 3 rows. 1: Name of the day today. 2: Current time. 3: Today's date. Each row has the same width using jQuery's BigText plugin. When the day changes, the font-size of the day changes as well to equalize the width of the rows.

by Balint Pekker

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/modernizr-1.6.min.js"></script>
<script src="http://www.zachleat.com/bigtext/demo/js/jquery.ba-throttle-debounce.min.js"></script>
<script src="http://www.zachleat.com/bigtext/bigtext.js"></script>
<div id="bigtext" style="width: 300px">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

CSS

#bigtext {
	border: 1px solid rgba(255,0,0,0.5);
	color: #bcbcbc;
    padding: 40px 15px;
}

JavaScript

tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
    var d=new Date(+new Date + 12096e5);
	var dx=d.toGMTString();
		dx=dx.substr(0,dx.length -3);
		d.setTime(Date.parse(dx))
		d.setSeconds(d.getSeconds() + 0);
	var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

		 if(nhour==0){ap=" AM";nhour=12;}
	else if(nhour<12){ap=" AM";}
    else if(nhour==12){ap=" PM";}
	else if(nhour>12){ap=" PM";nhour-=12;}

	if(nyear<1000) nyear+=1900;
	if(nmin<=9) nmin="0"+nmin;
	if(nsec<=9) nsec="0"+nsec;

	document.getElementById('1').innerHTML = "" + tday[nday].toUpperCase() + "";
    
    document.getElementById('2').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "" + ap + "";
    
    document.getElementById('3').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
}

window.onload=function(){
    GetClock();
    setInterval(GetClock,1000);
    $('#bigtext').bigtext();
}