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();

    }

 

最後完成!

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