ASP.NET实现无刷新倒计时功能

首先是在asp.net,html视图中添加如下主要代码:

 

1、ajax技术目的实现无刷新

 

   <script type="text/javascript">
        var WillDoXmlHttp;

        function Countdown()
        {
            setInterval("WillDo()",1000);
        }
       
        function WillDo()
        {
            createWillDoXmlHttpRequest();

            var url = "CountDown.aspx";

            WillDoXmlHttp.open("Get", url, true);

            WillDoXmlHttp.onreadystatechange = WillDoCallback;

            WillDoXmlHttp.send(null);
           
        }
       
        function createWillDoXmlHttpRequest()
        {
          if (window.XmlHttpRequest)
          {
             WillDoXmlHttp = new XmlHttpRequest();
          }
          else if (window.ActiveXObject)
          {
            try
            {
                WillDoXmlHttp = new ActiveXObject("MsXml2.XmlHTTP");
            }
            catch (e1)
            {
                try
                {
                    WillDoXmlHttp = new ActiveXObject("Microsoft.XmlHTTP");
                }
                catch (e2)
                {}
            }
          }
          return WillDoXmlHttp;    
        }
        
        function WillDoCallback()
        {
            if (WillDoXmlHttp.readyState == 4)
            {
                if (WillDoXmlHttp.status == 200)
                {      
                    var dbsyContent = document.getElementById("divCountDown");
                   
                    dbsyContent.innerHTML = WillDoXmlHttp.responseText;
                }
            }

            window.status="";
        }
    </script>

 

   2、在body处添加调用ajax代码,目的是为了页面一加载就调用

 
        <body  οnlοad="Countdown();">

 

    3、添加一个div,放置倒计时内容

 

       <div id="divCountDown"></div>

 

其次:添加页面处理倒计时功能实现(这里新增的页面为:CountDown.aspx)

 

     在cs页面代码中加入如下代码:

 

     protected void Page_Load(object sender, EventArgs e)
    {
        ShowCountDown(GetValidDate());
    }

   

        /// <summary>
    /// 得到结束时间
    /// </summary>
    /// <returns></returns>
    private DataTable GetValidDate()
    {

           DataSet dsProgram = "这里是从数据库获取结束时间的代码";

           return dsProgram.Tables[0];

    }

 

     private void ShowCountDown(DataTable dtEndtime)
    {
        //当前时间
        DateTime dtStart = System.DateTime.Now;
        //结束时间
        DateTime dtEnd = DateTime.Parse(dtEndtime.Rows[0]["Endtime"].ToString());
        //获取两个时间之间的间隔  
        TimeSpan ts = dtEnd.Subtract(dtStart);

 

        StringBuilder sbTable = new StringBuilder("<table width=100%  border=0 cellpadding=0 cellspacing=/"3/" align=left>");

        sbTable.Append("<tr>");

        sbTable.Append("<td>");

        sbTable.Append("本日学生票团购剩余时间:");

        //sbTable.Append("<font color='darkred'>" + ts.Days.ToString() + "</font>天&nbsp;");

        sbTable.Append("<font color='darkred'>"+((ts.Hours<10)?("0"+ts.Hours.ToString()):ts.Hours.ToString())+"</font>小时&nbsp;");

        sbTable.Append("<font color='darkred'>" + ((ts.Minutes < 10) ? ("0" + ts.Minutes.ToString()) : ts.Minutes.ToString()) + "</font>分&nbsp;");

        sbTable.Append("<font color='darkred'>" + ((ts.Seconds < 10) ? ("0" + ts.Seconds.ToString()) : ts.Seconds.ToString()) + "</font>秒&nbsp;");

        sbTable.Append("</td>");

        sbTable.Append("</tr>");

        sbTable.Append("</table>");

        Response.AppendHeader("Cache-Control", "no-cache");
        Response.Write(sbTable.ToString());
        Response.End();

    }

 

最后完成!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章