《Countdown控件(v1.0)用户手册》HTML 版

作者:ITPOW 来源:ITPOW(原创) 日期:2008-3-12

 

Countdown控件(v1.0)用户手册

1.   介绍

CountdownITPOW开发,是ASP.NET中一款倒计时控件,功能非常强大,与数据源配合使用可以灵活地、自动地显示距离某一(些)事件的时间差。

 

功能与亮点:

Ø  显示当前距某一事件的天数、小时数或分钟数,也可以将天数、小时数、分钟数配合使用。

Ø  配合数据源可以很方便地自动进行倒计时展示,而且什么时间段进行什么样的倒计时展示也是可控的。

Ø  使用模板可以自定义设置要倒计时展示的内容,也可在模板中为内容添加超链接等。

Ø  可以很方便地设置样式。

 

示例:

Ø  离中国的传统节日-春节还有6

Ø  今天是五一国际劳动节

Ø  离开幕式还有3

Ø  离开幕式还有35小时

Ø  离开幕式还有7分钟

Ø  活动已经闭幕1小时

 

2.   运行环境

ASP.NET.NET Framework 2.0 及以上)。

 

3.   名称说明

事件-通常是一个有意义的活动、节日、节气、纪念日等,Countdown控件计算当前时间到事件发生时间相隔的时间差。

倒计时展示-在网页上显示类似“距离某某节还有多少天”的内容称为倒计时展示。

 

4.   使用说明

设置数据库与数据源

为了更好地使用Countdown控件,强烈建议你将所有的事件存入数据库中,再通过设置数据源让Countdown控件可以读取数据库中的内容。如果你只有一个事件要进行倒计时展示,或者你认为你可以定时手动地更换事件,你也可以跳过此步,直接给Countdown控件的相关属性赋值,具体请参见使用控件。关于如何设计数据库并向其中添加事件,请参见事件设计说明

下面演示了如何使用SqlDataSource控件连接Countdown数据库。

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

    ConnectionString="Data Source=(local);Persist Security Info=False;User ID=Countdown;Password=Countdown;Initial Catalog=Cftea;"

    SelectCommand="select top 1 TargetDate, TargetFormat, getdate() as CurrentDate from cftea_Countdown where StartDate<=getdate() and EndDate>=getdate() order by TargetDate, EndDate">

</asp:SqlDataSource>

也可以在数据源中省略CurrentDate,此时则使用Countdown控件取得的时间作为当前时间。

 

引入控件

Ø  将控件 DLL 文件放到网站根目录的Bin目录下。

Ø  在需要引用控件的页面加入:

<%@ Register Assembly="Cftea.WebControls.Countdown" Namespace="Cftea.WebControls" TagPrefix="Cftea" %>

或者在web.config中引入:

<add tagPrefix="Cftea" namespace="Cftea.WebControls" assembly=" Cftea.WebControls.Countdown"/>

 

使用控件

示例代码如下:

<Cftea:Countdown ID="Countdown1" runat="server" DataSourceID="SqlDataSource1" />

 

该控件继承于System.Web.UI.WebControls.DataBoundControl,另外具有如下属性:

Ø  CurrentDate-当前时间,由于数据库可以和控件所在的网页不在同一个服务器,所以为了不受双方的时间不一致的影响,特增加了这个属性,有了这个属性,该值就可以通过数据库服务器来提供(利用数据源)。默认值:DateTime.Now

Ø  TargetDate-事件发生的时间。

Ø  TargetFormat-倒计时展示的格式字符串,请参见事件设计说明

Ø  DataCurrentDateField-数据源提供的CurrentDate的字段名称。默认值:CurrentDate

Ø  DataTargetDateField-数据源提供的TargetDate的字段名称。默认值:TargetDate

Ø  DataTargetFormatField-数据源提供的TargetFormat的字段名称。默认值:TargetFormat

Ø  TimeSpanCssClass-时间差的值在 HTML 中的 class 名称。比如我们要想让“离春节还有8天”中的“8”使用红色显示,我们可以给该属性赋值,并针对该属性值写样式表。

 

5.   事件设计说明

事件的内容我们一般存储在数据库中(也可以以其它形式存储,只要通过数据源提供数据即可)

,通常我们在数据库中至少设置四个字段

Ø  StartDate(datetime)-倒计时展示开始时间。

Ø  EndDate(datetime)- 倒计时展示结束时间。

Ø  TargetDate(datetime)-事件发生时间。

Ø  TargetFormat-倒计时展示的格式字符串。

我们排序按TargetDateEndDate进行排序,这样我们还可以实现“穿插”的倒计时展示。比如:我们可以在1月到8月均进行奥运会倒计时展示,而其中临近某些节日时又自动切换为临近节日的倒计时展示。

由于Countdown是通过数据源来读取数据库中的内容,所以这里并不对数据库作过多的约定。在我们提供的事件中,StartDate表示倒计时展示刚刚开始的时间,而EndDate表示倒计时展示最后有效的时间(过了该时间才不进行展示,并不时到了该时间正好不进行展示)。

 

TargetFormat

TargetFormat支持HTML,另外还支持六个占位符。

Ø  {d}距离目标事件的天数,小数向下舍去为整数。比如:今天11点与明天12点,相差为1天。

Ø  {D}距离目标事件的天数,小数向上保留为整数。比如:今天11点与今天12点,相差为1天。所以使用{D}时,我们把TargetDate精确到天就可以了,不然在同一天都会出现相差1天的情况。

Ø  {h}距离目标事件的小时数,仅由时决定,小数向下舍去为整数。比如:今天五点半与明天七点,相差是1小时。

Ø  {H}距离目标事件的总共小时数, 小数向上保留为整数。比如:今天五点半与明天七点,相差是26小时。

Ø  {n}距离目标事件的分钟数,仅由分决定,小数向下舍去为整数。比如:今天05:30:00与明天05:31:01,相差1分钟。

Ø  {N}距离目标事件的总共分钟数,小数向上保留为整数。比如:今天05:30:00与明天05:31:01,相差1442分钟。

 

根据上述描述,我们可以:

{d}{h}{n}中的一个或多个进行混用,产生如下效果:

Ø  还有111小时8分钟仪式正式举行。

而一般将{D}{H}{N}单独使用,产生如下效果:

Ø  离仪式正式举行还有1

Ø  离仪式正式举行还有36小时

Ø  离仪式正式举行还有2108分钟

 

6.   反编译

本控件的DLL文件并未进行混淆处理,所以你可以对它进行反编译,但请在法律许可的范围内进行。

 

相关文章