js倒计时（获取服务器端时间）

前台页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test4.aspx.cs" Inherits="test4" %>

<!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>倒计时</title>
    <script type="text/javascript">
function show_date_time(time, element){
        window.setTimeout("show_date_time('"+time+"','" + element + "')", 1000);       
        BirthDay = new Date(time);
        //获取客户端当前时间（不符合现实需求）
        //today=new Date();
        //获取服务器当前时间
        if (window.ActiveXObject){
        http_request=new ActiveXObject('Microsoft.XMLHTTP');
        } else if (window.XMLHttpRequest) {
        http_request=new XMLHttpRequest();
        }
        http_request.open('HEAD', '.', false);//获取服务器时间，XHR不能跨域!!!
        http_request.send(null);
        var ServerDate = new Date(http_request.getResponseHeader('Date'));
       //document.write ("<br>服务器时间："+ServerDate);
        var today=ServerDate ;
        timeold=(BirthDay.getTime()-today.getTime()); 
        sectimeold=timeold/1000 
        secondsold=Math.floor(sectimeold); 
        msPerDay=24*60*60*1000 
        e_daysold=timeold/msPerDay 
        daysold=Math.floor(e_daysold); 
        e_hrsold=(e_daysold-daysold)*24; 
        hrsold=Math.floor(e_hrsold); 
        e_minsold=(e_hrsold-hrsold)*60; 
        minsold=Math.floor((e_hrsold-hrsold)*60); 
        seconds=Math.floor((e_minsold-minsold)*60);     
        if(daysold<0)
        {       
         document.getElementById(element).innerHTML="0天0小时0分0秒";
        }else{
        document.getElementById(element).innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
        }
}
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label ID="lblStatus" runat="server" Text="Label"></asp:Label>
    <asp:Label ID="LabelTime" runat="server" Text=""></asp:Label>
    <script>show_date_time(('<%=panicTime %>'),'LabelTime')</script>
    </div>
    </form>
</body>
</html>

后台页面：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using mshopClass;


public partial class test4 : System.Web.UI.Page
{
    public string panicBuyStartTime = "";  //开始时间
    public string panicBuyEndTime = "";  //结束时间
    public string panicTime = "";  //倒计时间
    protected void Page_Load(object sender, EventArgs e)
    {
        BindShopDetail();
    }


    //获取商品倒计时
    void BindShopDetail()
    {
        string sql = "select  panicBuyStartTime,panicBuyEndTime from tb1 where id=1";

        DataTable dt = mallCtr.SqlTable(sql);        if (dt.Rows.Count > 0)        {            panicBuyStartTime = dt.Rows[0]["panicBuyStartTime"].ToString(); //开始时间            panicBuyEndTime = dt.Rows[0]["panicBuyEndTime"].ToString();  //结束时间            if (Convert.ToDateTime(panicBuyStartTime) < Convert.ToDateTime(DateTime.Now.ToString()) && Convert.ToDateTime(panicBuyEndTime) > Convert.ToDateTime(DateTime.Now.ToString()))   //抢购已开始            {                lblStatus.Text = "秒杀结束倒计时：";                panicTime = panicBuyEndTime;            }            else if (Convert.ToDateTime(panicBuyStartTime) > Convert.ToDateTime(DateTime.Now.ToString()))  //抢购未开始            {                lblStatus.Text = "秒杀开始倒计时：";                panicTime = panicBuyStartTime;            }            else if (Convert.ToDateTime(panicBuyEndTime) < Convert.ToDateTime(DateTime.Now.ToString()))            {                lblStatus.Text = "秒杀活动已结束";                LabelTime.Visible = false;            }        }    }}

好处：能获取服务器当前时间进行倒数计时

弊端：倒计时到达时，比如活动开始时，页面不能自动刷新

实例下载：点击打开链接

秒客网

js倒计时（获取服务器端时间）

相关文章