這幾天做的網站需要一個倒計時,如是作了一個如下的：
從上面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元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
