ASP.NET倒计时

kingfly.good

浏览: 27072 次
性别:
来自: 成都

最近访客更多访客>>

hcy_shiyi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ASP.NET

ASP.net .net ASP WebService Web

这几天做的网站需要一个倒计时,如是作了一个如下的：

<%@ 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;
    }
}

运行效果：