这几天做的网站需要一个倒计时,如是作了一个如下的：
从上面HTML代码中可以看出，我使用了ASP.NET AJAX 中的Timer控件和JavaScript WebService两种方法来实现
ASP.NET AJAX Timer控件：
JavaScript WebService[CountdownService]:
运行效果：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Countdown.aspx.cs" Inherits="Countdown" %>
<!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>Countdown</title>
<script type="text/javascript">
var totalSeconds;//剩余时间(秒)
//倒计时函数
function startCountdown()
{
if(totalSeconds > 0)
{
var days = Math.floor(totalSeconds / 86400);
var hours = Math.floor(totalSeconds % 86400 / 3600);
var minutes = Math.floor(totalSeconds % 3600 / 60);
var seconds = Math.floor(totalSeconds % 60);
document.getElementById("lblDays").innerHTML = days;
document.getElementById("lblHours").innerHTML = (hours >= 10 ? hours : "0" + hours);
document.getElementById("lblMinutes").innerHTML = (minutes >= 10 ? minutes : "0" + minutes);
document.getElementById("lblSeconds").innerHTML = (seconds >=10 ? seconds : "0" + seconds);
totalSeconds--;
}
else
{
clearInterval(timer);
}
}
function pageLoad(sender, args)
{
CountdownService.GetTotalSeconds(onSucceeded);//获取剩余时间(秒)
}
//成功获取剩余时间后的回调函数
function onSucceeded(result)
{
totalSeconds = result;
var days = Math.floor(totalSeconds / 86400);
var hours = Math.floor(totalSeconds % 86400 / 3600);
var minutes = Math.floor(totalSeconds % 3600 / 60);
var seconds = Math.floor(totalSeconds % 60);
document.getElementById("lblDays").innerHTML = days;
document.getElementById("lblHours").innerHTML = (hours >= 10 ? hours : "0" + hours);
document.getElementById("lblMinutes").innerHTML = (minutes >= 10 ? minutes : "0" + minutes);
document.getElementById("lblSeconds").innerHTML = (seconds >=10 ? seconds : "0" + seconds);
}
timer = setInterval("startCountdown()",1000);//开始倒计时
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="CountdownService.asmx" />
</Services>
</asp:ScriptManager>
<div style="border-style: solid;">
使用Timer控件
<asp:UpdatePanel ID="UpdatePanelCountdown" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTimerDays" runat="server" Text="0" ForeColor="Red" />天
<asp:Label ID="lblTimerHours" runat="server" Text="0" ForeColor="Red" />时
<asp:Label ID="lblTimerMinutes" runat="server" Text="0" ForeColor="Red" />分
<asp:Label ID="lblTimerSeconds" runat="server" Text="0" ForeColor="Red" />秒
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick1" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<br />
<hr style="color: Lime;" />
<br />
<div id="DivCountdown" style="border-style: solid;">
使用JavaScript<br />
<asp:Label ID="lblDays" runat="server" Text="0" ForeColor="Red" />天
<asp:Label ID="lblHours" runat="server" Text="0" ForeColor="Red" />时
<asp:Label ID="lblMinutes" runat="server" Text="0" ForeColor="Red" />分
<asp:Label ID="lblSeconds" runat="server" Text="0" ForeColor="Red" />秒
</div>
</form>
</body>
</html>
从上面HTML代码中可以看出，我使用了ASP.NET AJAX 中的Timer控件和JavaScript WebService两种方法来实现
ASP.NET AJAX Timer控件：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Countdown : System.Web.UI.Page
{
DateTime NowTime;//当前时间
DateTime EndTime = Convert.ToDateTime("2010-06-03 23:59:59");//结束时间
TimeSpan CountdownSpan;//时间间隔
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
NowTime = DateTime.Now;
CountdownSpan = EndTime - NowTime;
if (CountdownSpan.TotalSeconds > 0)
{
lblTimerDays.Text = CountdownSpan.Days.ToString();
lblTimerHours.Text = CountdownSpan.Hours > 10 ? CountdownSpan.Hours.ToString() : "0" + CountdownSpan.Hours.ToString();
lblTimerMinutes.Text = CountdownSpan.Minutes > 10 ? CountdownSpan.Minutes.ToString() : "0" + CountdownSpan.Minutes.ToString();
lblTimerSeconds.Text = CountdownSpan.Seconds > 10 ? CountdownSpan.Seconds.ToString() : "0" + CountdownSpan.Seconds.ToString();
}
}
}
protected void Timer1_Tick1(object sender, EventArgs e)
{
NowTime = DateTime.Now;
CountdownSpan = EndTime - NowTime;
if (CountdownSpan.TotalSeconds > 0)
{
lblTimerDays.Text = CountdownSpan.Days.ToString();
lblTimerHours.Text = CountdownSpan.Hours > 10 ? CountdownSpan.Hours.ToString() : "0" + CountdownSpan.Hours.ToString();
lblTimerMinutes.Text = CountdownSpan.Minutes > 10 ? CountdownSpan.Minutes.ToString() : "0" + CountdownSpan.Minutes.ToString();
lblTimerSeconds.Text = CountdownSpan.Seconds > 10 ? CountdownSpan.Seconds.ToString() : "0" + CountdownSpan.Seconds.ToString();
}
}
}
JavaScript WebService[CountdownService]:
<%@ WebService Language="C#" Class="CountdownService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class CountdownService : System.Web.Services.WebService
{
[WebMethod]
public int GetTotalSeconds()
{
DateTime NowTime = DateTime.Now;
DateTime EndTime = Convert.ToDateTime("2010-06-03 23:59:59");
TimeSpan Countdown = EndTime - NowTime;
return (Countdown.TotalSeconds > 0) ? (int)Countdown.TotalSeconds : 0;
}
}
运行效果：
