Answered by:
Display Server Time and have it refresh every second using jQuery

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