This project is read-only.
Project Description
High-resolution Digital Clock: light-weight Javascript code snippet added to ASP.NET Web page could enrich user experience and overall impression

Working DEMO is available at: http://www.webinfocentral.com

Clock resolution could be set up to milliseconds; it's capable of displaying Date/Time, either UTC or Local
Browser compatibility (tested): Internet Explorer, FireFox, Safari/Chrome

Project contains:
1. Lightweight Javascript module (DigitalClock.js)
2. Sample ASP.NET Web page (Default.aspx) to demonstrate the functionality of the Digital Clock
Javascript code module
//******************************************************************************
// Module           :   DigitalClock.js
// Author           :   Alexander Bell
// Copyright        :   2007-2009 Alexander Bell
// Date Created     :   02/15/2007
// Last Modified    :   10/10/2009
// Description      :   High-Resolution Digital Clock (ASP.NET/Javascript)

//******************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//******************************************************************************

// div element ID to display Date/Time
var _tClock = "Clk";

// var to start/stop clock updates
var _pID="";

// start clock onload
StartTopClockOnLoad(StartTopClock);

// loader
function StartTopClockOnLoad(tFunc) 
{
    if (window.addEventListener) 
    { window.addEventListener('load', tFunc, false);}
    else if (window.attachEvent) {window.attachEvent('onload', tFunc); }
}

// start digital clock
function StartTopClock() 
{ _pID = window.setInterval('UpdateTopClock()', 100);}

// update date/time reading
function UpdateTopClock() 
{
    try 
    {
        (document.getElementById(_tClock)).innerHTML =
	     DateAndTime('d', 't', '', '', '1', '');
    }
    catch (e) { }
}

// function to return date/time string 
//****************************************************************
// ShowDate :   Flag to include DATE
// ShowTime :   Flag to include TIME
// md       :   Day/Month format: MM/DD (default) or DD/MM
// Clock24  :   Use 12 or 24 hr. Clock
// ShowMS   :   Flag to include milliseconds (1 digit)
// LocUTC   :   Select between Local (default) or UTC time
function DateAndTime(ShowDate, 
                     ShowTime, 
                     md,
                     Clock24, 
                     ShowMS,
                     LocUTC)
{
    // private vars
    var yyyy;       // Year
    var mm;         // Month
    var dd;         // Day
    var h;          // Hours
    var m;          // Minutes
    var s;          // Seconds
    var ms;         // Milliseconds
    var ampm;       // AM or PM
    var strD;       // temp string for Date
    var strT;       // temp string for Time
    var ret="";     // return string

    // new DATE and TIME object
    now = new Date();
    
    // if parameter not empty, format and add date
    if (ShowDate!=""){
        // UTC DATE
        if (LocUTC=="UTC") {
	        yyyy =now.getUTCFullYear();
	        mm =now.getUTCMonth()+1;
	        dd =now.getUTCDate();
	    }
	    // local DATE(Default)
	    else {
	    	yyyy =now.getFullYear();
	        mm =now.getMonth()+1;
	        dd =now.getDate();
	    }
    
        // use 2 digits MM/DD format
        if (mm<10) mm="0"+mm;
        if (dd<10) dd="0"+dd;
        
        // use MMDD or DDMM (Default: MMDD)
        if (md=="ddmm") {strD= dd + '/' + mm + '/' + yyyy;}
        else {strD= mm + '/'+ dd +'/' + yyyy;}
        
        //DATE STRING
        ret=strD + " ";
    }

    // if parameter not empty, format and add time
    if (ShowTime != "")
    {
        // UTC time
        if (LocUTC=="UTC") {
	        h =now.getUTCHours();
	        m =now.getUTCMinutes();
	        s =now.getUTCSeconds();
	        ms=now.getUTCMilliseconds();
	    }
	    // local time(Default)
	    else {
	        h =now.getHours();
	        m =now.getMinutes();
	        s =now.getSeconds();
	        ms=now.getMilliseconds();
	    }
        // use 2 digits for H, M and S
        if (h<10) h="0"+h;
        if (m<10) m="0"+m;
        if (s<10) s="0"+s;

        // add milliseconds
        if (ShowMS != "") { ms = "." + Math.round(ms / 100 - 0.5); } else {ms = ""; }

        // use 12/24 Clock (default 12 hr clock)
        if (Clock24=="24") {strT =h+':'+m+':'+s + ms;}
        else {
	        ampm= (h>=12) ? "PM":"AM";
	        if (h>12) 	h-=12;
	        if (h==0) 	h=12;
	        strT= h + ':' + m + ':' + s + ms + ' ' + ampm;
	     }
	    // time string
        ret += strT;
    }
    
    // optional UTC prefix
    ret=((LocUTC=="UTC")? "UTC " : "" ) + ret;

    // return string
    return(ret);
}

Sample ASP.NET Web Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>HIGH RESOLUTION DIGITAL CLOCK</title>
    </head>

    <body>
        
        <!--Digital Clock Javascript include-->
        <script src='<%=ResolveClientUrl("~/DigitalClock.js")%>' type="text/javascript" >
        </script>
        
        <form id="form1" runat="server">
        
                <!--DIGITAL CLOCK-->
                <h1>REAL-TIME... OH, YEAH !</h1>
                <div style="padding:10px; border: solid 1px maroon" id="Clk"></div>
                
        </form>
    </body>
</html>

ADDITIONAL ONLINE RESOURCES:

  1. Embedding YouTube™ video player into ASP.NET web page
  2. WebTV pilot project (Beta)

Clock Digital Clock High-Resolution Online Clock Web Javascript ASP.NET HTML XHTML CSS IE FireFox Safari Chrome ResolveClientUrl

Last edited Feb 18, 2015 at 2:36 AM by DrABELL, version 12