ASP.NET网站中显示实时时间

谁践踏了优雅 2022-07-15 11:25 262阅读 0赞

ASP.NET网站中显示实时时间

标签： [ asp.net][asp.net][ajax][][timer][][server][][asp][][xhtml][]

2012-03-28 22:10  6526人阅读 [评论][Link 1](2) 收藏 [举报][Link 2]

本文章已收录于：

![category_icon.jpg][] 分类：

ASP.NET*（4）* ![arrow_triangle_20_down.jpg][] ![arrow_triangle_up.jpg][]

[作者同类文章][Link 3] *X*

在ASP[.NET][]环境中开发设计网站或网络应用程序时，往往需要实时显示当前日期和时间。这时，通常使用AJAX控件来实现。

需要注意的是，在.NET Framework 2.0版本中，工具箱中是没有AJAX Extensions控件的。而.NET Framework 3.5版本中集成了AJAX。

ASP[.Net][.NET] AJAX包括三部分：

①一个扩展客户端[JavaScript][]功能的客户端库或框架；

②一个允许ASP.NET AJAX很好地集成到Visual  Studio中的服务端编程和开发扩展包；

③一个由社区开发和支持的工具箱。

在服务器端，AJAX扩展包包含了少数几个AJAX控件，分别是：ScriptManager、ScriptManagerProxy、Timer、UpdatePanel、UpdateProgess。

其中，ScriptManager控件可以指示ASP.NET配置引擎使用AJAX方式向客户端发送响应，并且在发送响应时引入脚本库。

要特别注意：每个支持AJAX功能的ASP.NET的Web窗体必须包含且只能包含一个ScriptManager控件。

UpdatePanel是一种利用AJAX实现的新的 Web窗体中的控件容器。每个要支持AJAX的ASP.NET Web窗体可包含一个或多个UpdatePanel控件。

要实现实时显示时间，只需要下面两个步骤。

1、在ASP.NET 项目中新建一个Web窗体，命名为ShowCurrentTime，其前台代码如下。

**\[html\]** [ view plain][view plain] [ copy][view plain] [ print][view plain] [?][view plain]

1.  <%@ Page Language="C\#" AutoEventWireup="true" CodeFile="ShowCurrentTime.aspx.cs" Inherits="ShowCurrentTime" %>  
2.    
3.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
4.    
5.  <html xmlns="http://www.w3.org/1999/xhtml">  
6.  <head runat="server">  
7.      <title>动态显示实时时间</title>            
8.  </head>  
9.    
10. <body>  
11.     <form id="form1" runat="server">  
12.       
13.     <div>  
14.         <asp:ScriptManager ID="ScriptManager1" runat="Server" ></asp:ScriptManager>  
15.     </div>  
16.     <table style=" position: absolute; margin-left:200px; margin-right:200px; margin-top:100px; width:270px; height:78px; top: 15px; left: 10px;">  
17.         <tr>  
18.            <td>动态显示实时时间</td>  
19.         </tr>  
20.         <tr>  
21.             <td style="height:100px;">  
22.             <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
23.                 <ContentTemplate>当前时间是：  
24.               
25.                     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>    
26.                     <asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>  
27.                 </ContentTemplate>                  
28.             </asp:UpdatePanel>     
29.             </td>  
30.         </tr>  
31.           
32.     </table>  
33.     </form>  
34. </body>  
35. </html>

![save_snippets.png][]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowCurrentTime.aspx.cs" Inherits="ShowCurrentTime" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>动态显示实时时间</title>          
    </head>
    
    <body>
        <form id="form1" runat="server">
        
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="Server" ></asp:ScriptManager>
        </div>
        <table style=" position: absolute; margin-left:200px; margin-right:200px; margin-top:100px; width:270px; height:78px; top: 15px; left: 10px;">
        	<tr>
        	   <td>动态显示实时时间</td>
        	</tr>
        	<tr>
        	    <td style="height:100px;">
        	    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        	        <ContentTemplate>当前时间是：
    		    
        	            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>  
        	            <asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>
        	        </ContentTemplate>    	        
        	    </asp:UpdatePanel>   
        	    </td>
        	</tr>
        	
        </table>
        </form>
    </body>
    </html>

2、在ShowCurrentTime.aspx.cs文件中，只需要添加一句代码即可。代码如下：

**\[csharp\]** [ view plain][view plain] [ copy][view plain] [ print][view plain] [?][view plain]

1.  using System;  
2.  using System.Collections.Generic;  
3.  using System.Linq;  
4.  using System.Web;  
5.  using System.Web.UI;  
6.  using System.Web.UI.WebControls;  
7.    
8.  public partial class ShowCurrentTime : System.Web.UI.Page  
9.  \{  
10.     protected void Page\_Load(object sender, EventArgs e)  
11.     \{  
12.         Label1.Text = DateTime.Now.ToString();  
13.       
14.     \}  
15. \}

![save_snippets.png][]

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class ShowCurrentTime : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        
        }
    }

至此，完成了Label中实时显示时间的功能。另外，还可以根据需要设置时间显示的样式。

如果只想显示日期，而不显示时间，那么可以利用SubString取出前面的日期。

顶

踩

*  上一篇[JavaScript中的变量及数据类型][JavaScript 1]
 *  下一篇[ASP.NET中使用<script runat="server">][ASP.NET_script runat_server]

#### 我的同类文章 ####

ASP.NET*（4）*

[http://blog.csdn.net][http_blog.csdn.net]

*  *•*[ASP.NET中弹出消息框的几种方法][ASP.NET]2012-05-16*阅读***1790**
 *  *•*[ASP.NET中使用<script runat="server">][ASP.NET_script runat_server 1]2012-04-11*阅读***4757**

*  *•*[GridView分页问题][GridView]2012-05-11*阅读***2301**
 *  *•*[ASP.NET网站发布][ASP.NET 1]2012-02-23*阅读***490**

1楼 [qxssong][] 2013-10-30 15:15发表 [ \[回复\]][Link 4] [\[引用\]][Link 5] [ \[举报\]][Link 2]

[![3_qxssong.jpg][]][qxssong]

这样每次都postback吧，为什么不用Javascript呢  
<script>  
function displayTime() \{  
var elt = document.getElementById("clock");  
var now = new Date();  
elt.innerHTML = now.toLocaleTimeString();  
setTimeout(displayTime, 1000);  
\}  
window.onload = diaplayTime;  
</script>  
  
在<body>里：  
<span id="clock"></span>  
这样即使断网也能显示实时时间。

Re: [之苒][Link 6] 2013-11-14 09:59发表 [ \[回复\]][Link 4] [\[引用\]][Link 5] [ \[举报\]][Link 2]

[![3_mygis2005.jpg][]][Link 6]

回复qxssong：谢谢，您的建议很好！

[asp.net]: http://www.csdn.net/tag/asp.net
[ajax]: http://www.csdn.net/tag/ajax
[timer]: http://www.csdn.net/tag/timer
[server]: http://www.csdn.net/tag/server
[asp]: http://www.csdn.net/tag/asp
[xhtml]: http://www.csdn.net/tag/xhtml
[Link 1]: http://blog.csdn.net/mygis2005/article/details/7404807#comments
[Link 2]: http://blog.csdn.net/mygis2005/article/details/7404807#report
[category_icon.jpg]: /images/20220715/76257f07fb5145c782ef227394e8320f.png
[arrow_triangle_20_down.jpg]: http://static.blog.csdn.net/images/arrow_triangle%20_down.jpg
[arrow_triangle_up.jpg]: /images/20220715/d91280df2a0e40b9a52af4f1ed9d14d9.png
[Link 3]: http://blog.csdn.net/Mygis2005/article/category/1111252
[.NET]: http://lib.csdn.net/base/dotnet
[JavaScript]: http://lib.csdn.net/base/javascript
[view plain]: http://blog.csdn.net/mygis2005/article/details/7404807#
[save_snippets.png]: /images/20220715/97a6d5f46faa490496df8eba7f1a125e.png
[JavaScript 1]: http://blog.csdn.net/mygis2005/article/details/7375419
[ASP.NET_script runat_server]: http://blog.csdn.net/mygis2005/article/details/7448165
[http_blog.csdn.net]: http://blog.csdn.net/
[ASP.NET]: http://blog.csdn.net/Mygis2005/article/details/7572989
[ASP.NET_script runat_server 1]: http://blog.csdn.net/Mygis2005/article/details/7448165
[GridView]: http://blog.csdn.net/Mygis2005/article/details/7557121
[ASP.NET 1]: http://blog.csdn.net/Mygis2005/article/details/7286979
[qxssong]: http://blog.csdn.net/qxssong
[Link 4]: http://blog.csdn.net/mygis2005/article/details/7404807#reply
[Link 5]: http://blog.csdn.net/mygis2005/article/details/7404807#quote
[3_qxssong.jpg]: /images/20220715/4b01e60ada704eccb67254d303152906.png
[Link 6]: http://blog.csdn.net/Mygis2005
[3_mygis2005.jpg]: /images/20220715/850e0cdf571c4e4ab6d63e88f77beaf0.png