Templates by BIGtheme NET

JQuery to display simple timer on web page

This is a common requirement for most of the web sites.
There are different ways to display digital clock on web pages.
Most efficient way is useing JQuery.

Even we can use Java Script, performence hit will be there in case.

This solves even browser time zone difference problem as well.

Code works fine with browsers like IE10, IE11, Firefox & google crom as well.

Given is the complete source code that help to display closk on web page.

displayClockOnWebPageWithJQuery.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready(function () {
    setInterval(function () {
        displayClock()
    }, 1000);
});
function displayClock() {
    $("#clock").html("CLOCK");
	
	var fireFox = navigator.userAgent.search("Firefox");
    var iE6 = navigator.userAgent.search("MSIE 6.*");
    var iE7 = navigator.userAgent.search("MSIE 7.*");
    var iE8 = navigator.userAgent.search("MSIE 8.*");
    var iE10 = navigator.userAgent.search("MSIE 10.*");
    var iE11 = navigator.userAgent.match(/Trident.*rv[ :]*11./);
	
    var currentTime = new Date();
    //hack for IE 8 and IE 7, Date.parse only works when time stamp is separated by '/' instead of '-'  and 'T' is removed
    //so convert  2012-06-24T17:00:00-07:00 to 2012/06/24T17:00:00/07:00
    if (iE8 != -1 || iE7 != -1 || iE6 != -1) {
        currentTime = new Date(window.timestamp.replace(/-/ig, '/').replace(/T/, ' ').split('.')[0]);
    }

    //time zone offset
    var timezone = currentTime.getTimezoneOffset() * 60000;
    var time = currentTime.getTime() + timezone;

    //If the browser is different from IE10, IE11 and Firefox, then we need to add the time zone difference.
    if (fireFox == -1 && iE10 == -1 && iE8 == -1 && iE7 == -1 && iE6 == -1 && iE11 == null) {
        currentTime = new Date(time);
    }

    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
	var currentSeconds = currentTime.getSeconds();

    // Pad the minutes and seconds with leading zeros, if required
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

    // Compose the string for display
    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;

    $("#clock").html(currentTimeString);
}
</script>
</head>
<body>
<div id="clock" class="clock"/>
</body>
</html>

*** Venkat – Happy leaning ****