JavaScript

For Generating Digital Clock

 CSS:

<style type="text/css">
#wallClock {
    width:200px;
    text-align:center;
    padding:30px;
    border:7px double #CC0000;
    background-color:#000066;
}
#fullDate {
    display:block;
    font-family:Courier,monospace;
    font-weight:bold;
    font-size:16pt;
    color:#FFFF00;
}
#bigTime {
    display:block;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:bold;
    font-size:56pt;
    color:#FFFFFF;
    line-height:100%;
}

#dayName {
    display:inline;
    font-family:Courier,monospace;
    font-weight:bold;
    font-size:16pt;
    color:#FFFF00;
}
#seconds {
    display:inline;
    font-family:Courier,monospace;
    font-weight:bold;
    font-size:16pt;
    color:#FFFFFF;
}
</style>

Script:

<script type="text/javascript">
var clockTimerID = null;
var monNames = new Array ('',
        'Jan','Feb','Mar',
        'Apr','May','Jun',
        'Jul','Aug','Sep',
        'Oct','Nov','Dec');
var dayNames = new Array ('',
        'Sunday','Monday',
        'Tuesday','Wednesday',
        'Thursday','Friday',
        'Saturday' );

function startClock () {

    if ( clockTimerID != null ) {
        clearTimeout ( clockTimerID );
    }

    update_clock_display ();
}

function update_clock_display () {

    // GET THE CURRENT SYSTEM DATE/TIME INFORMATION
    var dateNow = new Date ();

    // SPLIT THE DATE INTO VARIOUS DATE/TIME COMPONENTS
    var hour = dateNow.getHours ();
    var mins = dateNow.getMinutes ();
    var secs = dateNow.getSeconds ();
    var date = dateNow.getDate ();
    var daynum = dateNow.getDay () + 1;
    var monnum = dateNow.getMonth () + 1;
    var year = dateNow.getYear ();

    // SECONDARY CALCULATION FOR CLOCK DIGITS, ETC.
    var hour1 = Math.floor ( hour / 10 );
    var hour2 = hour % 10;
    var mins1 = Math.floor ( mins / 10 );
    var mins2 = mins % 10;
    var secs1 = Math.floor ( secs / 10 );
    var secs2 = secs % 10;
    var date1 = Math.floor (date / 10);
    var date2 = date % 10;
    if ( year < 200 ) {
        year += 1900;
    }

    // NOW START THE ROUTINES TO UPDATE THE CLOCK
    updateDate('fullDate',monNames,date1,date2,monnum,year);
    updateTime('bigTime',hour1,hour2,mins1,mins2);
    updateDayName('dayName',dayNames,daynum);
    updateSeconds('seconds',secs1,secs2);

    // THIS LINE RECURSIVELY CALLS IT'S OWN ROUTINE EVERY SECOND
    clockTimerID = setTimeout ("update_clock_display ()" ,1000)
}

var prevDate = "";
function updateDate(objId,monNames,date1,date2,monnum,year) {

    var htmstr = date1 + '' + date2 + '-' + monNames[monnum] + '-' + year;
    if (htmstr != prevDate) {
        squirtHTML(objId,htmstr);
    }
    prevDate = htmstr;
}

var prevTime = "";
function updateTime(objId,hour1,hour2,mins1,mins2) {

    var htmstr = hour1 + '' + hour2 + ':' + mins1 + '' + mins2;
    if (htmstr != prevTime) {
        squirtHTML(objId,htmstr);
    }
    prevTime = htmstr;
}

var prevDayName = "";
function updateDayName(objId,dayNames,dayNum) {

    var htmstr = dayNames[dayNum] + '  ';
    if (htmstr != prevDayName) {
        squirtHTML(objId,htmstr);
    }
    prevDayName = htmstr;
}

var prevSeconds = "";
function updateSeconds(objId,secs1,secs2) {

    var htmstr = secs1 + '' + secs2;
    if (htmstr != prevSeconds) {
        squirtHTML(objId,htmstr);
    }
    prevSeconds = htmstr;
}

function convertObj(objStr) {

    var objID = null;

    if (document.getElementById) {
        objID = document.getElementById(objStr);
    } else if (document.all) {
        objID = eval("document." + objStr);
    } else if (document.layers) {
        objID = eval("document.layers." + objStr);
    }

    return(objID);
}

function squirtHTML(objStr,htmstr) {

    var objID = convertObj(objStr);
    objID.innerHTML = htmstr;
}
</script>

HTML:

 <div id="wallClock">
<div id="fullDate"></div>
<div id="bigTime"></div>
<div id="dayName"></div>
<div id="seconds"></div>

Place Before end of the body tag.

   <script type="text/javascript">startClock()</script>