Home Asp.net Display Computer Current Local Time in jQuery

Display Computer Current Local Time in jQuery

21
0
Display Computer Current Local Time in jQuery
Display Computer Current Local Time in jQuery

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.

Note: This time displayed is taken from user computer and not from the server.

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.

<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>

And here is the full HTML Markup code that I used to display current local time in jquery for my .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Show/Display Local Computer's Current time in webpage using jQuery</title>
    <script type="text/javascript" src="https://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.

Sample Result

Display Computer Current Local Time in jQuery
Display Computer Current Local Time in jQuery
Previous articleDisplay Computer Current Local Time in JavaScript
Next articlePassing Table Valued Parameters in SQL Stored Procedure
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

5 × 2 =