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

這篇文章介紹了javascript 實現秒殺團購倒計時展示的記錄方法有需要的朋友可以參考一下

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

復制代碼代碼如下:

<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<title></title>
<meta httpequiv="ContentType" content="text/html; charset=gb" />
<meta httpequiv="ContentLanguage" content="zhCN" />
<meta httpequiv="XUACompatible" content="IE=EmulateIE" />
<meta content="all" name="robots" />
<meta name="author" content="" />
</head>
<body onload=start()>

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

 

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


<script type="text/javascript">
var msbegintime = ""; //這個是活動開始的時間戳
var msendtime = ""; //這個是活動結束的時間戳
function start(){
 callBackServerTime("sk_time" "wyz" msbegintime msendtime);
}
//_showtimediv:時間顯示區域_showqdiv狀態顯示區域
//這個向服務器發送一個ajax請求服務器返回服務器當前的時間戳也就是xmlobjresponseText是一個服務器的時間戳
function callBackServerTime(_showtimediv _showqdiv _ms_begintime _ms_endtime) {
 var now = new Date();
 var urlstr = "random=" + Mathround(Mathrandom() * );
 var ajaxobj = new AJAXRequest; // 創建AJAX對象
 ajaxobjmethod = "GET"; // 設置請求方式為GET
 ajaxobjurl = "/gz/source/getServerTimedo?" + urlstr; //注意ajax的跨域問題
 ajaxobjcallback = function(xmlobj) {
 //ShowQTime(xmlobjresponseText _showtimediv _showqdiv _ms_begintime _ms_endtime _tryidsourceid);
 ShowQTime( _showtimediv _showqdiv"" _ms_begintime _ms_endtime); // 這裡使用靜態數字替代 xmlobjresponseText 方便測試
 }
 ajaxobjsend(); // 發送請求
}
//動態顯示”秒殺“時間函數
function ShowQTime(_showtimediv _showqdiv _nowtime _ms_begintime _ms_endtime) {
 _nowtime = Number(_nowtime);
 var timmer = Mathfloor((_ms_endtime _nowtime) / ());
 if (_nowtime >= _ms_begintime && timmer > ) {;
 //秒殺進行中
 documentgetElementById(_showtimediv)innerHTML = "天小時分鐘秒";
 documentgetElementById(_showqdiv)innerHTML = "<a > 秒殺開始了！！！ </a>";
 } else {
 //秒殺倒計時
 var nMS = _ms_begintime _nowtime; //計算出開始時間和現在時間的時間戳差
 var nD = Mathfloor(nMS / ( * * * ));
 var nH = Mathfloor(nMS / ( * * )) % ;
 var nM = Mathfloor(nMS / ( * )) % ;
 var nS = Mathfloor(nMS / ) % ;
 var nMS = Mathfloor(nMS / ) % ;
 if (nD >= ) {
 var _timestr = "";
 var snd = nDtoString();
 if (sndlength == ) {
 snd = "" + snd;
 }
 _timestr += "" + sndsubstring( ) + sndsubstring( ) +"天";
 var snH = nHtoString();
 if (snHlength == ) {
 snH = "" + snH;
 }
 _timestr += "" + snHsubstring( ) + snHsubstring( ) +"小時";
 var snM = nMtoString();
 if (snMlength == ) {
 snM = "" + snM;
 }
 _timestr += "" + snMsubstring( ) + snMsubstring( ) +"分鐘";
 var snS = nStoString();
 if (snSlength == ) {
 snS = "" + snS;
 }
 _timestr += "" + snSsubstring( ) + snSsubstring( ) +"秒";
 documentgetElementById(_showtimediv)innerHTML = _timestr;
 }else {
 //秒殺結束
 documentgetElementById(_showtimediv)innerHTML = "天小時分鐘秒";
 documentgetElementById(_showqdiv)innerHTML = "<a > 秒殺結束了！！！ </a>";
 }
 }
 //注意 (_nowtime + ) 增加秒
 setTimeout("ShowQTime(" + _showtimediv + "" + _showqdiv + "" + (_nowtime + ) + "" + _ms_begintime + "" + _ms_endtime + ")" );
}
function AJAXRequest() {
 var xmlObj = false;
 var CBfuncObjSelf;
 ObjSelf=this;
 try { xmlObj=new XMLHttpRequest; }
 catch(e) {
 try { xmlObj=new ActiveXObject("MSXMLXMLHTTP"); }
 catch(e) {
 try { xmlObj=new ActiveXObject("MicrosoftXMLHTTP"); }
 catch(e) { xmlObj=false; }
 }
 }
 if (!xmlObj) return false;
 thismethod="POST";
 thisurl;
 thisasync=true;
 thiscontent="";
 thiscallback=function(cbobj) {return;}
 thissend=function() {
 if(!thismethod||!thisurl||!thisasync) return false;
 xmlObjopen (thismethod thisurl thisasync);
 if(thismethod=="POST") xmlObjsetRequestHeader("ContentType""application/xwwwformurlencoded");
 xmlObjonreadystatechange=function() {
 if(xmlObjreadyState==) {
 if(xmlObjstatus==) {
 ObjSelfcallback(xmlObj);
 }
 }
 }
 if(thismethod=="POST") xmlObjsend(thiscontent);
 else xmlObjsend(null);
 }
}
</script>
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19905.html

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

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