Display Server Time Using Javascript and ASP.NET in C#
November 20th, 2008I’ve recently written an ASP.NET page using C# that required displaying the server time on the webpage using Javascript. To do this you need to output the Javascript code using C# and initialise the Javascript Date() object with the server time, after playing around I found this code does the job.
"server_time = new Date('" + DateTime.Now.ToString("MMMM d, yyyy HH:mm:ss") + "');"
The entire code looks like this assuming you have a label with id=’clock’ on the page. Just output the string js to the page to add the clock.
const string crlf = "\r\n";
string js = "<script type='text/javascript'>" + crlf +
"window.onload=startclock;" + crlf +
"var clock;" + crlf +
"var time_diff;" + crlf +
"function startclock(){" + crlf +
"clock=document.getElementById('clock');" + crlf +
"server_time = new Date('" + DateTime.Now.ToString("MMMM d, yyyy HH:mm:ss") + "');" + crlf +
"time_diff=new Date()-server_time;" + crlf +
"setInterval('runclock()',1000);" + crlf +
"}" + crlf +
"function runclock(){" + crlf +
"var cDate=new Date();" + crlf +
"cDate.setTime(cDate.getTime()-time_diff);" + crlf +
"var curr_hours = cDate.getHours();" + crlf +
"var curr_mins = cDate.getMinutes();" + crlf +
"var curr_secs = cDate.getSeconds();" + crlf +
"curr_hours=(curr_hours < 10)?'0' + curr_hours:curr_hours;" + crlf +
"curr_mins=(curr_mins < 10)?'0' + curr_mins:curr_mins;" + crlf +
"curr_secs=(curr_secs < 10)?'0' + curr_secs:curr_secs;" + crlf +
"clock.innerHTML=curr_hours+':'+curr_mins+':'+curr_secs;" + crlf +
"}" + crlf +
"</script>";
I should mention that if you’re using classic ASP and VBScript then the line becomes.
"server_time = new Date(" & DatePart("yyyy",Date) & "," & DatePart("m",Date)-1 & "," & DatePart("d",Date) & "," & DatePart("h",Now) & "," & DatePart("n",Now) & "," & DatePart("s",Now) & ");"
January 16th, 2009 at 6:38 am
here is how i implemented this. And working on safari, IE7, FF 3, Chrome.
on page load
const string crlf = “\r\n”;
string js = “” + crlf +
“window.onload=startclock;” + crlf +
“var clock;” + crlf +
“var time_diff;” + crlf +
“function startclock(){” + crlf +
“clock=document.getElementById(‘clock’);” + crlf +
“server_time = new Date(‘” + DateTime.Now.ToString(“MMMM d, yyyy HH:mm:ss”) + “‘);” + crlf +
“time_diff=new Date()-server_time;” + crlf +
“setInterval(‘runclock()’,1000);” + crlf +
“}” + crlf +
“function runclock(){” + crlf +
“var cDate=new Date();” + crlf +
“cDate.setTime(cDate.getTime()-time_diff);” + crlf +
“var curr_hours = cDate.getHours();” + crlf +
“var curr_mins = cDate.getMinutes();” + crlf +
“var curr_secs = cDate.getSeconds();” + crlf +
“curr_hours=(curr_hours < 10)?’0′ + curr_hours:curr_hours;” + crlf +
“curr_mins=(curr_mins < 10)?’0′ + curr_mins:curr_mins;” + crlf +
“curr_secs=(curr_secs < 10)?’0′ + curr_secs:curr_secs;” + crlf +
“clock.innerHTML=curr_hours+’:'+curr_mins+’:'+curr_secs;” + crlf +
“}” + crlf +
“”;
Page.RegisterStartupScript(“ServerTimeScript”, js);
ASPX page
June 9th, 2009 at 8:40 pm
Good code, but why use C# to write the whole thing? Why not just have C# write the one line that sets the server time? This avoids all the sloppiness of using C# to write JS. Just write your JS and use C# to populate the JS var.
June 10th, 2009 at 10:58 am
Good point Cory and I can’t imagine why I didn’t think of that in the first place!