前段时间访问过“台湾微软”的网站,它的首页做了个大大的按钮,绿油油的(偶发现台湾的开发人员喜欢把网站的许多重要的控件的颜色做成绿色,哈哈,其中原因大家可能都知道!不相信现在就访问“ MSDN 台湾 ”,一进去就遇见一大片“绿色”,哈哈,开个玩笑),上面动态显示当前的时间,觉得很酷,当时也想做一个类似的东东,没有做成,今天我也来做一个,并且做一个红色的,哈哈!
效果图如下:
下面是新项步骤:
1、往“设计”页面拖拽一个“ UpdatePanel ”,再往这个“ UpdatePanel ”里拖拽一个“ Button ”最后在拖拽一个“ TimerControl ”。
2、选定“ TimerControl ”,按F4 调出“属性”窗口,把它的“ Interval ”属性改为“1000”。
3、选定“ UpdatePanel ”,按F4 调出“属性”窗口,修改其“ Triggers ”属性,点击“New Trigger ”按钮,选择“当一个控件属性变化时触发”,接着点击“控件”选择“ TimerControl1 ”,点击“属性”选择 “ Interval ”,确定再确定。
4、双击“设计”页面,在“ Page_Load() ”方法下加入下面的代码:
Button1.Text = "北京时间:"+DateTime.Now.ToString();
5、在“ ScriptManager ”控件的“ Enable Partial Rendering ”前面打上勾。
6、保存所有文件,按 F5 运行一把,效果应该出来了,黄色的数字每秒钟就变化一次,显示当前时间,这是在没有刷新的情况下实现的,你就是点击了那个按钮,页面也不会有刷新的感觉。
最后附上完整代码:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > Untitled Page </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< atlas:ScriptManager ID ="ScriptManager1" EnablePartialRendering ="true" runat ="server" />
< div >
< atlas:UpdatePanel ID ="UpdatePanel1" runat ="server" >
< ContentTemplate >
< asp:Button ID ="Button1" runat ="server" BackColor ="Red" Font-Bold ="True" ForeColor ="Yellow" Height ="46px" Text ="Button" Width ="244px" Font-Size ="Medium" />
</ ContentTemplate >
< Triggers >
< atlas:ControlValueTrigger ControlID ="TimerControl1" PropertyName ="Interval" />
</ Triggers >
</ atlas:UpdatePanel >
< atlas:TimerControl ID ="TimerControl1" runat ="server" Interval ="1000" >
</ atlas:TimerControl >
</ div >
</ form >
</ body >
</ html >