Oddly enough one of the best web sites I've been to in a while is my local gas company. They have this fancy little clock that tells you what time it is, I finally took the time to figure out how they did it. Here is the short version...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Clock </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* =================================================== */
// Display Date / Time
var ie = /MSIE/.test(navigator.userAgent);
/* =================================================== */
var addEvent;
if (document.addEventListener) {
addEvent = function(element, type, handler) {
element.addEventListener(type, handler, null);
};
} else if (document.attachEvent) {
addEvent = function(element, type, handler) {
element.attachEvent("on" + type, handler);
};
} else {
addEvent = new Function; // not supported
}
/* =================================================== */
// Display Date / Time
function clock(){
if (!document.getElementById){ return }
this.start = function(){
var self = this;
this.date = new Date();
// ===== Set Timezone & Daylight Savings ===========
var day = this.date.getDay();
var month = this.date.getMonth() + 1;
var week = Math.floor((this.date.getDate() - 1) / 7) + 1;
var dst = Number(month +""+ week +""+ day);
// daylight savings range
var start = 327 // March(3): Second(2) Sunday(7) = 327;
var end = 1117 // November(11): First(1) Sunday(7) = 1117;
this.offset = (dst > start && dst < end)? -5 : -6;
this.zone = "CT";
this.utc = this.date.getTime() + (this.date.getTimezoneOffset() * 60000);
this.d = new Date(this.utc + (3600000*this.offset));
// ===== Format Date ===============================
this.day = this.addZeros(this.d.getDate());
this.month = this.getMonthName(this.d.getMonth());
this.yr = this.d.getYear();
this.year = (this.yr<1000)? (this.yr+=1900) : this.yr;
self.addSeconds();
window.setInterval(function() {self.addSeconds();},1000);
};
this.addSeconds = function() {
this.d.setSeconds(this.d.getSeconds() + 1);
var hours = this.setMeridian(this.d.getHours());
var minutes = this.addZeros(this.d.getMinutes());
var seconds = this.addZeros(this.d.getSeconds());
document.getElementById("dateTime").innerHTML = this.month+" "+this.day+" "+this.year+" "+hours+":"+minutes+":"+seconds+" "+meridian+" "+this.zone;
};
this.getMonthName= function(nMonth){
var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
return months[nMonth]
};
this.setMeridian = function(hours){
meridian = (hours < 12)? "AM" : "PM";
return (hours > 12)? hours-12 : (hours==0)? 12 : hours;
};
this.addZeros = function(digits){
return (Number(digits) < 10) ? "0"+digits : digits;
};
}
addEvent(window,'load',startClock);
function startClock(){
var theClock = new clock();
theClock.start();
}
/* =================================================== */
//-->
</SCRIPT>
<STYLE TYPE="text/css" TITLE="">
t body { margin:0px; padding:0px; border:0px; text-align:center; background:#FFF; }
body { margin:0px; padding:0px; border:0px; text-align:center; background:#FFF; }
body * { font-family: Tahoma, Arial, Helvetica, sans-serif; }
#header ul.navitems { position:absolute; top:8px; left: 165px; z-index:10; margin:0px; padding:0px; list-style-type:none; }
#header ul.navitems li { float:right; font:normal 10px Arial, Helvetica, sans-serif; color:#898688; padding-left:10px; }
#header ul.navitems li.stock { background:transparent url(../images/arrow.gif) no-repeat 0px 0px; padding-right:10px; }
#header ul.navitems li#dateTime { border-left:1px solid #CCC; margin-left:10px; display:block; width:140px; padding:0px 10px 0px 10px; white-space:nowrap; }
#header ul.navitems li a { position:relative; top:2px }
</STYLE>
</HEAD>
<BODY >
<div id="header">
<ul class="navitems">
<li id="dateTime"> </li>
</ul>
</div>
</BODY>
</HTML>
