Now here in this tutorial, I’ll explain how you can show or display computer current local time in jquery as live clock without page refresh in your web page or your asp.net website with example demo code.
In my previous tutorials, I’d explained display your computer local time on webpage using javascript, how to show alert message from code-behind, how to call javascript function from code-behind and other more cracking tutorials on Asp.net, JavaScript and jQuery here.
We can display a clock which will be showing the local time of the client’s computer by using jQuery.
Display Computer Current Local Time in jQuery
Following is the jQuery script to display computer current local time in jquery on webpage on document ready or page load.
$(document).ready(function () {
DisplayCurrentTime();
});
function DisplayCurrentTime() {
var dt = new Date();
var refresh = 1000; //Refresh rate 1000 milli sec means 1 sec
var cDate = (dt.getMonth() + 1) + “/” + dt.getDate() + “/” + dt.getFullYear();
document.getElementById(‘cTime’).innerHTML = cDate + ” – “ + dt.toLocaleTimeString();
window.setTimeout(‘DisplayCurrentTime()’, refresh);
}
</script>
And here is the full HTML Markup code that I used to display current local time in jquery for my .aspx page:
<head>
<title>Show/Display Local Computer’s Current time in webpage using
jQuery</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function () {
DisplayCurrentTime();
});
function DisplayCurrentTime() {
var dt = new Date();
var refresh = 1000; //Refresh rate 1000 milli sec means 1 sec
var cDate = (dt.getMonth() + 1) + “/” + dt.getDate() + “/” + dt.getFullYear();
document.getElementById(‘cTime’).innerHTML = cDate + ” – “ + dt.toLocaleTimeString();
window.setTimeout(‘DisplayCurrentTime()’, refresh);
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<h4>
Show/Display Local Computer’s Current live time as clock in webpage using jQuery</h4>
<div>
<asp:Label ID=”cTime” runat=”server” ClientIDMode=”Static” BackColor=”#ffff00″
Font-Bold=”true” />
</div>
</form>
</body>
</html>
As you can see from above sample code, I called DisplayCurrentTime() method on DOM ready that is $(document).ready event of jQuery that loads the current local system time, set the interval for every one seconds and refresh current time without page refresh to display on the webpage. Following is the live demo of the above example code.
