ASP.NET倒计时两种方式 使用Timer控件和JavaScript代码
来源：互联网 发布：天文望远镜知乎 编辑：程序博客网 时间：2024/06/05 06:43
<%@ 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; }}
