ASP.NET倒計時兩種方式 使用Timer控制元件和JavaScript程式碼
阿新 • • 發佈：2019-01-22
<%@ 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; } }