javascript 實現'秒殺，團購'倒計時展示的記錄

最近做瞭一個房產的秒殺，團購的電子商務網站(房子也有秒殺，出手不小啊)，其中裡面有一個秒殺的倒計時展示，主要是判斷當前時間距離秒殺開始還有多少時間，還有秒殺開始和秒殺結束的各種展示。

其中最主要的一點就是所謂的當前時間不能使用瀏覽器通過new Date()獲取的客戶端時間，這樣隻要用戶修改瞭自己的機器時間那麼倒計時就會亂透瞭，所以這個當前時間必須使用的是服務器時間，所以采用的是靜態緩存頁面所以這個當前時間使用ajax方式進行獲取

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

距活動開始還有： <!– 這個是倒計時的顯示–>

參加秒殺！！！   <!– 這個是秒殺按鈕，倒計時為0時會變成可以秒殺的樣式–>

var msbegintime = "1323446400000"; //這個是活動開始的時間戳

var msendtime = "1325174400000"; //這個是活動結束的時間戳

jQuery(document).ready(function() {

callBackServerTime("sk_time", "wyz", msbegintime, msendtime);

});

//_showtimep:時間顯示區域，_showqp：狀態顯示區域

//這個向服務器發送一個ajax請求，服務器返回服務器當前的時間戳，也就是xmlobj.responseText是一個服務器的時間戳

function callBackServerTime(_showtimep, _showqp, _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, _showtimep, _showqp, _ms_begintime, _ms_endtime, _tryid,sourceid);

ShowQTime("1323158067288", _showtimep, _showqp, _ms_begintime, _ms_endtime, _tryid,sourceid); // 這裡使用靜態數字替代xmlobj.responseText 方便測試

}

ajaxobj.send(); // 發送請求

}

//動態顯示”秒殺“時間函數

function ShowQTime(_showtimep, _showqp, _nowtime, _ms_begintime, _ms_endtime) {

_nowtime = Number(_nowtime);

var timmer = Math.floor((_ms_endtime – _nowtime) / (1000));

if (_nowtime >= _ms_begintime && timmer > 0) {;

//秒殺進行中

document.getElementById(_showtimep).innerHTML = "0天0小時0分鐘0秒";

document.getElementById(_showqp).innerHTML = "<a href='/gz/sk/v/'>  秒殺開始瞭！！！  </a>";

} 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 += "" + snd.substring(0, 1) + snd.substring(1, 2) +"天";

var snH = nH.toString();

if (snH.length == 1) {

snH = "0" + snH;

}

_timestr += "" + snH.substring(0, 1) + snH.substring(1, 2) +"小時";

var snM = nM.toString();

if (snM.length == 1) {

snM = "0" + snM;

}

_timestr += "" + snM.substring(0, 1) + snM.substring(1, 2) +"分鐘";

var snS = nS.toString();

if (snS.length == 1) {

snS = "0" + snS;

}

_timestr += "" + snS.substring(0, 1) + snS.substring(1, 2) +"秒";

document.getElementById(_showtimep).innerHTML = _timestr;

}else {

//秒殺結束 www.aiwalls.com

document.getElementById(_showtimep).innerHTML = "0天0小時0分鐘0秒";

document.getElementById(_showqp).innerHTML = "<a href='/gz/sk/v/'>  秒殺結束瞭！！！  </a>";

}

//註意(_nowtime + 1000) 增加1 秒

setTimeout("ShowQTime('" + _showtimep + "','" + _showqp + "','" + (_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>

摘自於吉吉的技術博客

Related posts:

發佈留言 取消回覆

發佈留言取消回覆