locked
Display Server Time and have it refresh every second using jQuery RRS feed

  • Question

  • User-1274246664 posted

    I would like to display the current time from the webserver on a webpage and have it redisplay every 1 second.  My question is how can I set up a javascript function on the client  that will eb automatically called every second?

    Would there be a better way doing this?

    Thanks

    Wednesday, June 8, 2011 6:06 PM

Answers

  • User348806598 posted

    Hi,

    Try this-

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "Display Server Time and have it refresh every second using jQuery.aspx/GetServerTime",
                    dataType: "json",
                    success: function(data) {
                        dateTime = new Date(data.d);
                        timefunction();
                        setInterval("timefunction()", 1000);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        debugger;
                    }
                });
            });
            var dateTime = new Date();
            var hour, hourTemp, minute, minuteTemp, second, secondTemp, monthnumber, monthnumberTemp, monthday, monthdayTemp, year, ap;
            function timefunction() {
                dateTime.setSeconds(dateTime.getSeconds() + 1, 0);
                hourTemp = hour = dateTime.getHours();
    
                minuteTemp = minute = dateTime.getMinutes();
                if (minute.toString().length == 1)
                    minuteTemp = "0" + minute.toString();
    
                secondTemp = second = dateTime.getSeconds();
                if (second.toString().length == 1)
                    secondTemp = "0" + second.toString();
    
                monthnumberTemp = monthnumber = dateTime.getMonth();
                if ((monthnumber + 1).toString().length == 1)
                    monthnumberTemp = "0" + (monthnumber + 1).toString();
    
                monthdayTemp = monthday = dateTime.getDate();
                if (monthday.toString().length == 1)
                    monthdayTemp = "0" + monthday.toString();
                year = dateTime.getYear();
                ap = "AM";
                if (hour > 11) { ap = "PM"; }
                if (hour > 12) { hour = hour - 12; }
                if (hour == 0) { hour = 12; }
                if (hour.toString().length == 1)
                    hourTemp = "0" + hour.toString();
                document.getElementById('time').innerHTML = monthnumberTemp + "/" + monthdayTemp + "/" + year + " " + hourTemp + ":" + minuteTemp + ":" + secondTemp + " " + ap;
            }
            
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <span id="time"></span>
        </form>
    </body>
    </html>
        [System.Web.Services.WebMethod]
        public static string GetServerTime()
        {
            DateTime dt = DateTime.Now;
            System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
            dt.ToString("d");
            return dt.ToString("MM/dd/yyyy") + dt.ToString("G").Substring(dt.ToString("G").IndexOf(" "));
        }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 9, 2011 5:54 AM

All replies

  • User-1083916677 posted

    This will execute a javascript function every second.  Put your jquery ajax call in yourfunctionhere() and i believe it should work.

    setTimeout('yourfunctionhere()', 1000);

    Wednesday, June 8, 2011 6:50 PM
  • User348806598 posted

    Hi,

    Try this-

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "Display Server Time and have it refresh every second using jQuery.aspx/GetServerTime",
                    dataType: "json",
                    success: function(data) {
                        dateTime = new Date(data.d);
                        timefunction();
                        setInterval("timefunction()", 1000);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        debugger;
                    }
                });
            });
            var dateTime = new Date();
            var hour, hourTemp, minute, minuteTemp, second, secondTemp, monthnumber, monthnumberTemp, monthday, monthdayTemp, year, ap;
            function timefunction() {
                dateTime.setSeconds(dateTime.getSeconds() + 1, 0);
                hourTemp = hour = dateTime.getHours();
    
                minuteTemp = minute = dateTime.getMinutes();
                if (minute.toString().length == 1)
                    minuteTemp = "0" + minute.toString();
    
                secondTemp = second = dateTime.getSeconds();
                if (second.toString().length == 1)
                    secondTemp = "0" + second.toString();
    
                monthnumberTemp = monthnumber = dateTime.getMonth();
                if ((monthnumber + 1).toString().length == 1)
                    monthnumberTemp = "0" + (monthnumber + 1).toString();
    
                monthdayTemp = monthday = dateTime.getDate();
                if (monthday.toString().length == 1)
                    monthdayTemp = "0" + monthday.toString();
                year = dateTime.getYear();
                ap = "AM";
                if (hour > 11) { ap = "PM"; }
                if (hour > 12) { hour = hour - 12; }
                if (hour == 0) { hour = 12; }
                if (hour.toString().length == 1)
                    hourTemp = "0" + hour.toString();
                document.getElementById('time').innerHTML = monthnumberTemp + "/" + monthdayTemp + "/" + year + " " + hourTemp + ":" + minuteTemp + ":" + secondTemp + " " + ap;
            }
            
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <span id="time"></span>
        </form>
    </body>
    </html>
        [System.Web.Services.WebMethod]
        public static string GetServerTime()
        {
            DateTime dt = DateTime.Now;
            System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
            dt.ToString("d");
            return dt.ToString("MM/dd/yyyy") + dt.ToString("G").Substring(dt.ToString("G").IndexOf(" "));
        }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 9, 2011 5:54 AM
  • User-1274246664 posted

    I noticed the year is not formatting correctly it is dispalying as 111 rather than 2011.

    Thursday, June 9, 2011 10:54 PM
  • User348806598 posted

    Hi,

    For me its working fine. Check copying the exect code

    Friday, June 10, 2011 12:59 AM
  • User-1274246664 posted

    You must be using Internet explorer. I had forgot getYear() is not Y2K compliant and only returns a year realitve to 1900 in firefox

    It must be changed to date.getFull/year();

    this will work in IE, FireFox and Opera. Thanks for the help.

    Friday, June 10, 2011 2:39 AM