DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 實現 秒殺,團購 倒計時展示的記錄 分享
javascript 實現 秒殺,團購 倒計時展示的記錄 分享
編輯:關於JavaScript     

最近做了一個房產的秒殺,團購的電子商務網站(房子也有秒殺,出手不小啊),其中裡面有一個秒殺的倒計時展示,主要是判斷當前時間距離秒殺開始還有多少時間,還有秒殺開始和秒殺結束的各種展示。
其中最主要的一點就是所謂的當前時間不能使用浏覽器通過new Date()獲取的客戶端時間,這樣只要用戶修改了自己的機器時間那麼倒計時就會亂透了,所以這個當前時間必須使用的是服務器時間,所以采用的是靜態緩存頁面所以這個當前時間使用ajax方式進行獲取

復制代碼 代碼如下:
<!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" lang="zh-CN">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta content="all" name="robots" />
<meta name="author" content="" />
</head>
<body onload='start()'>
.
距活動開始還有:<span id="sk_time"></span> <!-- 這個是倒計時的顯示 -->
.
<br/>
<span id="wyz">
<span class="btn_02">  參加秒殺!!!  </span> <!-- 這個是秒殺按鈕,倒計時為0時會變成可以秒殺的樣式 -->
</span>
.
<script type="text/javascript">
var msbegintime = "1323446400000"; //這個是活動開始的時間戳
var msendtime = "1325174400000"; //這個是活動結束的時間戳
function start(){
    callBackServerTime("sk_time", "wyz", msbegintime, msendtime);
}
//_showtimediv:時間顯示區域,_showqdiv:狀態顯示區域
//這個向服務器發送一個ajax請求,服務器返回服務器當前的時間戳,也就是xmlobj.responseText是一個服務器的時間戳
function callBackServerTime(_showtimediv, _showqdiv, _ms_begintime, _ms_endtime) {
    var now = new Date();
    var urlstr = "random=" + Math.round(Math.random() * 10000000);
    var ajaxobj = new AJAXRequest;    // 創建AJAX對象
    ajaxobj.method = "GET";   // 設置請求方式為GET
    ajaxobj.url = "/gz/source/getServerTime.do?" + urlstr; //注意ajax的跨域問題
    ajaxobj.callback = function(xmlobj) {
        //ShowQTime(xmlobj.responseText, _showtimediv, _showqdiv, _ms_begintime, _ms_endtime, _tryid,sourceid);
        ShowQTime( _showtimediv, _showqdiv,"1323158067288", _ms_begintime, _ms_endtime);     // 這裡使用靜態數字替代 xmlobj.responseText 方便測試
    }
    ajaxobj.send();    // 發送請求
}
//動態顯示”秒殺“時間函數
function ShowQTime(_showtimediv, _showqdiv, _nowtime, _ms_begintime, _ms_endtime) {
    _nowtime = Number(_nowtime);
    var timmer = Math.floor((_ms_endtime - _nowtime) / (1000));
    if (_nowtime >= _ms_begintime && timmer > 0) {;
        //秒殺進行中
        document.getElementById(_showtimediv).innerHTML = "<span class='pim_time'>0</span>天<span class='pim_time'>0</span>小時<span class='pim_time'>0</span>分鐘<span class='pim_time'>0</span>秒";
        document.getElementById(_showqdiv).innerHTML = "<span class='btn_01'><a href='/gz/sk/v/'>  秒殺開始了!!!  </a></span>";
    } else {
        //秒殺倒計時
        var nMS = _ms_begintime - _nowtime;  //計算出開始時間和現在時間的時間戳差
        var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));
        var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;
        var nM = Math.floor(nMS / (1000 * 60)) % 60;
        var nS = Math.floor(nMS / 1000) % 60;
        var nMS = Math.floor(nMS / 100) % 10;
        if (nD >= 0) {
            var _timestr = "";
            var snd = nD.toString();
            if (snd.length == 1) {
                snd = "0" + snd;
            }
            _timestr += "<span class='pim_time'>" + snd.substring(0, 1) + snd.substring(1, 2) +"</span>天";
            var snH = nH.toString();
            if (snH.length == 1) {
                snH = "0" + snH;
            }
            _timestr += "<span class='pim_time'>" + snH.substring(0, 1) + snH.substring(1, 2) +"</span>小時";
            var snM = nM.toString();
            if (snM.length == 1) {
                snM = "0" + snM;
            }
            _timestr += "<span class='pim_time'>" + snM.substring(0, 1) + snM.substring(1, 2) +"</span>分鐘";
            var snS = nS.toString();
            if (snS.length == 1) {
                snS = "0" + snS;
            }
            _timestr += "<span class='pim_time'>" + snS.substring(0, 1) + snS.substring(1, 2) +"</span>秒";
            document.getElementById(_showtimediv).innerHTML = _timestr;
        }else {
            //秒殺結束
             document.getElementById(_showtimediv).innerHTML = "<span class='pim_time'>0</span>天<span class='pim_time'>0</span>小時<span class='pim_time'>0</span>分鐘<span class='pim_time'>0</span>秒";
             document.getElementById(_showqdiv).innerHTML = "<span class='btn_01'><a href='/gz/sk/v/'>  秒殺結束了!!!  </a></span>";
        }
    }
    //注意 (_nowtime + 1000) 增加 1 秒
    setTimeout("ShowQTime('" + _showtimediv + "','" + _showqdiv + "','" + (_nowtime + 1000) + "','" + _ms_begintime + "','" + _ms_endtime + "')", 1000);
}
function AJAXRequest() {
    var xmlObj = false;
    var CBfunc,ObjSelf;
    ObjSelf=this;
    try { xmlObj=new XMLHttpRequest; }
    catch(e) {
        try { xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); }
        catch(e2) {
            try { xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); }
            catch(e3) { xmlObj=false; }
        }
    }
    if (!xmlObj) return false;
    this.method="POST";
    this.url;
    this.async=true;
    this.content="";
    this.callback=function(cbobj) {return;}
    this.send=function() {
        if(!this.method||!this.url||!this.async) return false;
        xmlObj.open (this.method, this.url, this.async);
        if(this.method=="POST") xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlObj.onreadystatechange=function() {
            if(xmlObj.readyState==4) {
                if(xmlObj.status==200) {
                    ObjSelf.callback(xmlObj);
                }
            }
        }
        if(this.method=="POST") xmlObj.send(this.content);
        else xmlObj.send(null);
    }
}
</script>
</body>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved