- 客户端倒计时：使用 JavaScript 在用户的浏览器上运行，优点是不占用服务器资源，响应速度快，缺点是用户可以禁用 JavaScript，导致功能失效。
- 服务器端倒计时：使用 ASP.NET 的 Timer 控件通过 AJAX 与服务器通信来更新倒计时，优点是更可靠（依赖服务器时间），可以与服务器端逻辑交互，缺点是会频繁向服务器发送请求，增加服务器负载。
下面我将详细介绍这两种方法的实现步骤和完整代码示例。
客户端倒计时 (推荐)
这是最常用、性能最好的方法，倒计时逻辑完全在用户的浏览器中执行。
实现原理
- 在 HTML 中放置一个用于显示倒计时的
<span>或<div>元素。 - 在 JavaScript 中编写一个函数，该函数：
- 获取目标结束时间（可以是固定的，也可以从服务器传递过来）。
- 计算当前时间与目标时间的差值。
- 将差值转换为天、小时、分钟、秒。
- 更新页面上的倒计时显示文本。
- 使用
setTimeout函数每秒调用一次自身，形成循环。
- 在页面加载时（
window.onload或 jQuery 的$(document).ready）启动这个倒计时函数。
完整示例 (ASPX + JavaScript)
假设我们创建一个名为 Countdown.aspx 的页面。
Countdown.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Countdown.aspx.cs" Inherits="YourWebApp.Countdown" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>客户端倒计时示例</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; margin-top: 50px; }
#countdown { font-size: 3em; font-weight: bold; color: #007bff; }
#message { font-size: 1.5em; margin-top: 20px; color: #28a745; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>距离新年还有：</h1>
<div id="countdown">加载中...</div>
<div id="message" style="display: none;">新年快乐！</div>
</div>
</form>
<!-- 引入 jQuery 库 (可选，但推荐) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// --- 配置 ---
// 目标日期：这里设置为下一年的1月1日
// 你也可以从服务器端获取一个动态的时间
// var targetDate = new Date('<%= TargetEndTime %>');
var targetDate = new Date(new Date().getFullYear() + 1, 0, 1);
// 倒计时显示元素
var countdownElement = $('#countdown');
var messageElement = $('#message');
// 启动倒计时函数
startCountdown();
function startCountdown() {
// 获取当前时间
var now = new Date().getTime();
// 计算剩余时间（毫秒）
var distance = targetDate - now;
// 如果倒计时结束
if (distance < 0) {
countdownElement.hide();
messageElement.show();
return; // 停止执行
}
// 计算天、小时、分钟、秒
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 更新显示内容，补零
countdownElement.text(days + "天 " + hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0'));
// 每秒更新一次 (1000毫秒)
setTimeout(startCountdown, 1000);
}
});
</script>
</body>
</html>
Countdown.aspx.cs (可选，用于从服务器传递时间)
如果你想根据服务器时间或数据库中的时间来设置倒计时,可以在后端代码中定义一个值，然后在前端 JavaScript 中读取。
using System;
namespace YourWebApp
{
public partial class Countdown : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 示例：设置一个固定的时间点，比如2025年6月1日
// 这个时间会被传递到前端JavaScript中
TargetEndTime = "2025/06/01 00:00:00";
}
// 在前端可以通过 <%= TargetEndTime %> 访问的属性
public string TargetEndTime { get; set; }
}
}
然后修改 Countdown.aspx 中的 JavaScript 部分：
// 从服务器获取目标时间
var targetDate = new Date('<%= TargetEndTime %>');
服务器端倒计时 (ASP.NET Timer 控件)
这种方法适用于需要与服务器端进行交互的场景,例如倒计时结束后需要触发数据库操作、发送邮件等。
实现原理
- 在页面上放置一个
ScriptManager控件，这是使用 ASP.NET AJAX 的前提。 - 放置一个
UpdatePanel控件，用于定义局部刷新的区域。 - 在
UpdatePanel内部放置一个Label用于显示倒计时，和一个Timer控件。 Timer控件的Tick事件会每隔一段时间（由Interval属性设定）触发一次。- 在
Tick事件的后台代码中，重新计算剩余时间并更新Label的文本。
完整示例
ServerCountdown.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ServerCountdown.aspx.cs" Inherits="YourWebApp.ServerCountdown" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>服务器端倒计时示例</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; margin-top: 50px; }
#countdownLabel { font-size: 3em; font-weight: bold; color: #dc3545; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<h1>服务器端倒计时 (每秒刷新)</h1>
<!-- UpdatePanel 定义了局部刷新的区域 -->
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- 倒计时显示标签 -->
<asp:Label ID="countdownLabel" runat="server" Text="计算中..."></asp:Label>
<!-- Timer 控件，每1000毫秒(1秒)触发一次 Tick 事件 -->
<asp:Timer ID="countdownTimer" runat="server" Interval="1000" OnTick="countdownTimer_Tick"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
ServerCountdown.aspx.cs
using System;
namespace YourWebApp
{
public partial class ServerCountdown : System.Web.UI.Page
{
// 定义一个页面级的变量来存储目标时间
// 这样在每次 Tick 事件中都能访问到同一个初始值
private DateTime _targetTime;
protected void Page_Load(object sender, EventArgs e)
{
// 如果是第一次加载页面，设置目标时间
if (!IsPostBack)
{
// 设置目标时间为当前时间后的30秒
_targetTime = DateTime.Now.AddSeconds(30);
// 你也可以从配置文件或数据库中读取这个时间
// _targetTime = GetEndTimeFromDatabase();
}
// 如果是回发（由Timer触发），则直接使用已经设置好的_targetTime
}
// Timer控件的 Tick 事件，每隔Interval毫秒触发一次
protected void countdownTimer_Tick(object sender, EventArgs e)
{
// 计算剩余时间
TimeSpan remainingTime = _targetTime - DateTime.Now;
// 如果倒计时结束
if (remainingTime.TotalSeconds <= 0)
{
// 停止Timer控件
countdownTimer.Enabled = false;
// 显示结束信息
countdownLabel.Text = "倒计时结束！";
// 在这里可以执行服务器端逻辑，
// 1. 更新数据库状态
// 2. 发送邮件通知
// 3. 触发其他业务流程
// Example: SendNotificationEmail();
return;
}
// 更新Label的文本，显示剩余时间
countdownLabel.Text = remainingTime.Seconds.ToString() + " 秒";
}
}
}
总结与对比
| 特性 | 客户端倒计时 (JavaScript) | 服务器端倒计时 (ASP.NET Timer) |
|---|---|---|
| 性能 | 高，不占用服务器资源，只在客户端运行。 | 较低，频繁的AJAX请求会增加服务器负载和网络流量。 |
| 可靠性 | 依赖JavaScript，用户禁用JS则功能失效。 | 高，基于服务器时间，不受客户端环境影响。 |
| 实现复杂度 | 简单，只需少量JavaScript代码。 | 稍复杂，需要 ScriptManager, UpdatePanel, Timer 等控件。 |
| 交互性 | 弱，难以直接与服务器端逻辑（如数据库）交互。 | 强，倒计时结束可以轻松触发服务器端事件，执行复杂逻辑。 |
| 适用场景 | 纯粹的UI展示，如活动倒计时、秒杀等。 | 需要服务器端响应的场景，如在线考试倒计时结束后自动交卷。 |
建议：
- 90% 的情况下，请使用客户端倒计时。 它更快、更轻量，用户体验更好。
- 只有当你的业务逻辑绝对需要在服务器端响应倒计时事件时，才考虑使用服务器端倒计时。
