网页倒计时网上代码很多，思路很简单，取出现在的时间跟结束时间做对比，求出时间差，然后用JS的setInterval函数来达到动态的效果。
取出当前时间时有两种方案，如果对时间精度要求不是很高可以取客户端时间，反之就要取服务器端时间。取服务器时间一般是用ajax获取，我想有些朋友会在一定频率下用ajax去服务器获取，本人今天的一段代码就是这样，每隔一秒去服务器端取一次，这种方法初看没什么问题，但在用户量比较大和网络状况不好的情况下就有问题了，请求太频繁可能会导致服务器压力过大，反应很慢。后来在同事的提醒下代取了另一种思路，精确度基本能满足要求。
本文提供一种比较简单的方案，思路就是在页面加载时用ajax去服务器获取当前时间，然后在JS中放一个全局变量，一秒钟加一，然后显示时间的方法每秒钟执行一次，执行时减去全局变量，具体代码如下：
先建一个空白页面（ASP.NET页面或HTML页面都行）用于显示倒计时，引入jquery和一个JS文件（下面会介绍）：
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
< head runat = " server " >
< title ></ title >
< script src = " JS/jquery-1.4.1.min.js " type = " text/javascript " ></ script >
< script src = " JS/Test.js " type = " text/javascript " ></ script >
</ head >
< body >
< form id = " form1 " runat = " server " >
< div >
< span id = " auctionTime " style = " font-size:40px;color:Red; " ></ span >< br />
< span id = " count " ></ span >
</ div >
</ form >
</ body >
</ html >
< head runat = " server " >
< title ></ title >
< script src = " JS/jquery-1.4.1.min.js " type = " text/javascript " ></ script >
< script src = " JS/Test.js " type = " text/javascript " ></ script >
</ head >
< body >
< form id = " form1 " runat = " server " >
< div >
< span id = " auctionTime " style = " font-size:40px;color:Red; " ></ span >< br />
< span id = " count " ></ span >
</ div >
</ form >
</ body >
</ html >
再新建一个WebService（TestWS.asmx）用于获取服务器端时间，代码如下：
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Globalization;
/// <summary>
/// Get server time
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class TestWS : System.Web.Services.WebService {
public TestWS () {
}
[WebMethod]
public string GetServerTime()
{
return DateTime.Now.AddSeconds( 120 ).ToString( " MMM dd,yyyy HH:mm:ss " , CultureInfo.GetCultureInfo( " en-US " ));
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Globalization;
/// <summary>
/// Get server time
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class TestWS : System.Web.Services.WebService {
public TestWS () {
}
[WebMethod]
public string GetServerTime()
{
return DateTime.Now.AddSeconds( 120 ).ToString( " MMM dd,yyyy HH:mm:ss " , CultureInfo.GetCultureInfo( " en-US " ));
}
}
然后就是JS调用这个WebService获取服务器端时间了，JS（Test.js）代码如下：
var
endTime
=
"
Dec,27,2010 23:06:00
"
;
$( function () {
GetServerTime();
})
function GetServerTime() {
$.ajax({
url: ' /UI/WS/TestWS.asmx/GetServerTime ' ,
data: ' {} ' ,
type: ' post ' ,
dataType: ' json ' ,
contentType: ' application/json; charset=utf-8 ' ,
cache: false ,
success: function (data) {
serverTime=data.d;
$( " #count " ).text(count);
show_time();
setInterval( " show_time( ) " , 1000 );
},
error: function (xhr) {
alert(xhr);
}
});
}
var serverTime;
$( function () {
GetServerTime();
})
function GetServerTime() {
$.ajax({
url: ' /UI/WS/TestWS.asmx/GetServerTime ' ,
data: ' {} ' ,
type: ' post ' ,
dataType: ' json ' ,
contentType: ' application/json; charset=utf-8 ' ,
cache: false ,
success: function (data) {
serverTime=data.d;
$( " #count " ).text(count);
show_time();
setInterval( " show_time( ) " , 1000 );
},
error: function (xhr) {
alert(xhr);
}
});
}
var serverTime;
var timespan = 0;
function show_time() {
var time_distance, str_time;
var int_day, int_hour, int_minute, int_second;
var time_now = new Date(serverTime);
var time_end = new Date($("#endTime").text());
time_now = time_now.getTime();
time_end = time_end.getTime();
//取系统现在时间
time_distance = time_end - time_now-timespan*1000;
//时间间隔。
if (time_distance >= 0) {
timespan = timespan + 1;
if (Math.floor(time_distance) < 30000) {
$("#auctionTime").css("color", "#FF0000");
}
if (time_distance == 0) {
if (toop) {
toop = false;
$("#auctionTime").css("color", "#369A28");
$("#currTime").text("00:00:00");
$("#auctionTime").text("00:00:00");
GetWiner();
return;
}
return;
}
//取出间隔时间的天、小时、分
int_day = Math.floor(time_distance / 86400000);
time_distance -= int_day * 86400000;
int_hour = Math.floor(time_distance / 3600000);
time_distance -= int_hour * 3600000;
int_minute = Math.floor(time_distance / 60000);
time_distance -= int_minute * 60000;
int_second = Math.floor(time_distance / 1000);
if (int_hour < 10)
int_hour = "0" + int_hour;
if (int_minute < 10)
int_minute = "0" + int_minute;
if (int_second < 10)
int_second = "0" + int_second;
str_time = int_hour + ":" + int_minute + ":" + int_second;
$("#auctionTime").text(str_time);
} else { }
}
function show_time() {
var time_distance, str_time;
var int_day, int_hour, int_minute, int_second;
var time_now = new Date(serverTime);
var time_end = new Date($("#endTime").text());
time_now = time_now.getTime();
time_end = time_end.getTime();
//取系统现在时间
time_distance = time_end - time_now-timespan*1000;
//时间间隔。
if (time_distance >= 0) {
timespan = timespan + 1;
if (Math.floor(time_distance) < 30000) {
$("#auctionTime").css("color", "#FF0000");
}
if (time_distance == 0) {
if (toop) {
toop = false;
$("#auctionTime").css("color", "#369A28");
$("#currTime").text("00:00:00");
$("#auctionTime").text("00:00:00");
GetWiner();
return;
}
return;
}
//取出间隔时间的天、小时、分
int_day = Math.floor(time_distance / 86400000);
time_distance -= int_day * 86400000;
int_hour = Math.floor(time_distance / 3600000);
time_distance -= int_hour * 3600000;
int_minute = Math.floor(time_distance / 60000);
time_distance -= int_minute * 60000;
int_second = Math.floor(time_distance / 1000);
if (int_hour < 10)
int_hour = "0" + int_hour;
if (int_minute < 10)
int_minute = "0" + int_minute;
if (int_second < 10)
int_second = "0" + int_second;
str_time = int_hour + ":" + int_minute + ":" + int_second;
$("#auctionTime").text(str_time);
} else { }
}
代码很简单，结构就不说了，只是注意WebService的路径，效果如下：
只是我在服务器端把当前时间添加了120秒，但在这儿时间差确是119，写到这儿我查了一下，是Math.floor()精度原因，Math.floor()是取整数部分，因此为了更精确应该加上一秒。
