javascript 實(shí)現(xiàn) 秒殺,團(tuán)購倒計(jì)時(shí)展示的記錄分享

2024-05-06 15:49:04

字體：大中小

供稿：網(wǎng)友

這篇文章介紹了javascript 實(shí)現(xiàn) 秒殺,團(tuán)購倒計(jì)時(shí)展示的記錄方法，有需要的朋友可以參考一下

最近做了一個(gè)房產(chǎn)的秒殺，團(tuán)購的電子商務(wù)網(wǎng)站(房子也有秒殺，出手不小啊)，其中里面有一個(gè)秒殺的倒計(jì)時(shí)展示，主要是判斷當(dāng)前時(shí)間距離秒殺開始還有多少時(shí)間，還有秒殺開始和秒殺結(jié)束的各種展示。
其中最主要的一點(diǎn)就是所謂的當(dāng)前時(shí)間不能使用瀏覽器通過new Date()獲取的客戶端時(shí)間，這樣只要用戶修改了自己的機(jī)器時(shí)間那么倒計(jì)時(shí)就會(huì)亂透了，所以這個(gè)當(dāng)前時(shí)間必須使用的是服務(wù)器時(shí)間，所以采用的是靜態(tài)緩存頁面所以這個(gè)當(dāng)前時(shí)間使用ajax方式進(jìn)行獲取

復(fù)制代碼代碼如下:

<!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" />
<meta content="" />
</head>
<body>
.
距活動(dòng)開始還有： 
.
 

 參加秒殺！！！ 

.
<script type="text/javascript">
var msbegintime = "1323446400000"; //這個(gè)是活動(dòng)開始的時(shí)間戳
var msendtime = "1325174400000"; //這個(gè)是活動(dòng)結(jié)束的時(shí)間戳
function start(){
 callBackServerTime("sk_time", "wyz", msbegintime, msendtime);
}
//_showtimediv:時(shí)間顯示區(qū)域，_showqdiv：狀態(tài)顯示區(qū)域
//這個(gè)向服務(wù)器發(fā)送一個(gè)ajax請求，服務(wù)器返回服務(wù)器當(dāng)前的時(shí)間戳，也就是xmlobj.responseText是一個(gè)服務(wù)器的時(shí)間戳
function callBackServerTime(_showtimediv, _showqdiv, _ms_begintime, _ms_endtime) {
 var now = new Date();
 var urlstr = "random=" + Math.round(Math.random() * 10000000);
 var ajaxobj = new AJAXRequest; // 創(chuàng)建AJAX對象
 ajaxobj.method = "GET"; // 設(shè)置請求方式為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); // 這里使用靜態(tài)數(shù)字替代 xmlobj.responseText 方便測試
 }
 ajaxobj.send(); // 發(fā)送請求
}
//動(dòng)態(tài)顯示”秒殺“時(shí)間函數(shù)
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) {;
 //秒殺進(jìn)行中
 document.getElementById(_showtimediv).innerHTML = "0天0小時(shí)0分鐘0秒";
 document.getElementById(_showqdiv).innerHTML = "<a href='/gz/sk/v/'> 秒殺開始了！！！ </a>";
 } else {
 //秒殺倒計(jì)時(shí)
 var nMS = _ms_begintime - _nowtime; //計(jì)算出開始時(shí)間和現(xiàn)在時(shí)間的時(shí)間戳差
 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) +"小時(shí)";
 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(_showtimediv).innerHTML = _timestr;
 }else {
 //秒殺結(jié)束
 document.getElementById(_showtimediv).innerHTML = "0天0小時(shí)0分鐘0秒";
 document.getElementById(_showqdiv).innerHTML = "<a href='/gz/sk/v/'> 秒殺結(jié)束了！！！ </a>";
 }
 }
 //注意 (_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>