這幾天做的網站需要一個倒計時,如是作了一個如下的:
從上面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; } }
運行效果:

更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
