提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript实现秒杀,团购倒计时展示的记录分享

JavaScript 实现 分享 记录 展示 秒杀 倒计时 团购
2023-06-13 09:15:03 时间

最近做了一个房产的秒杀，团购的电子商务网站(房子也有秒杀，出手不小啊)，其中里面有一个秒杀的倒计时展示，主要是判断当前时间距离秒杀开始还有多少时间，还有秒杀开始和秒杀结束的各种展示。
其中最主要的一点就是所谓的当前时间不能使用浏览器通过newDate()获取的客户端时间，这样只要用户修改了自己的机器时间那么倒计时就会乱透了，所以这个当前时间必须使用的是服务器时间，所以采用的是静态缓存页面所以这个当前时间使用ajax方式进行获取

复制代码代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<title></title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="zh-CN"/>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<metacontent="all"name="robots"/>
<metaname="author"content=""/>
</head>
<bodyonload="start()">
.
距活动开始还有：<spanid="sk_time"></span><!--这个是倒计时的显示-->
.
<br/>
<spanid="wyz">
<spanclass="btn_02">  参加秒杀！！！  </span><!--这个是秒杀按钮，倒计时为0时会变成可以秒杀的样式-->
</span>
.
<scripttype="text/javascript">
varmsbegintime="1323446400000";//这个是活动开始的时间戳
varmsendtime="1325174400000";//这个是活动结束的时间戳
functionstart(){
   callBackServerTime("sk_time","wyz",msbegintime,msendtime);
}
//_showtimediv:时间显示区域，_showqdiv：状态显示区域
//这个向服务器发送一个ajax请求，服务器返回服务器当前的时间戳，也就是xmlobj.responseText是一个服务器的时间戳
functioncallBackServerTime(_showtimediv,_showqdiv,_ms_begintime,_ms_endtime){
   varnow=newDate();
   varurlstr="random="+Math.round(Math.random()*10000000);
   varajaxobj=newAJAXRequest;   //创建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();   //发送请求
}
//动态显示”秒杀“时间函数
functionShowQTime(_showtimediv,_showqdiv,_nowtime,_ms_begintime,_ms_endtime){
   _nowtime=Number(_nowtime);
   vartimmer=Math.floor((_ms_endtime-_nowtime)/(1000));
   if(_nowtime>=_ms_begintime&&timmer>0){;
       //秒杀进行中
       document.getElementById(_showtimediv).innerHTML="<spanclass="pim_time">0</span>天<spanclass="pim_time">0</span>小时<spanclass="pim_time">0</span>分钟<spanclass="pim_time">0</span>秒";
       document.getElementById(_showqdiv).innerHTML="<spanclass="btn_01"><ahref="/gz/sk/v/">  秒杀开始了！！！  </a></span>";
   }else{
       //秒杀倒计时
       varnMS=_ms_begintime-_nowtime; //计算出开始时间和现在时间的时间戳差
       varnD=Math.floor(nMS/(1000*60*60*24));
       varnH=Math.floor(nMS/(1000*60*60))%24;
       varnM=Math.floor(nMS/(1000*60))%60;
       varnS=Math.floor(nMS/1000)%60;
       varnMS=Math.floor(nMS/100)%10;
       if(nD>=0){
           var_timestr="";
           varsnd=nD.toString();
           if(snd.length==1){
               snd="0"+snd;
           }
           _timestr+="<spanclass="pim_time">"+snd.substring(0,1)+snd.substring(1,2)+"</span>天";
           varsnH=nH.toString();
           if(snH.length==1){
               snH="0"+snH;
           }
           _timestr+="<spanclass="pim_time">"+snH.substring(0,1)+snH.substring(1,2)+"</span>小时";
           varsnM=nM.toString();
           if(snM.length==1){
               snM="0"+snM;
           }
           _timestr+="<spanclass="pim_time">"+snM.substring(0,1)+snM.substring(1,2)+"</span>分钟";
           varsnS=nS.toString();
           if(snS.length==1){
               snS="0"+snS;
           }
           _timestr+="<spanclass="pim_time">"+snS.substring(0,1)+snS.substring(1,2)+"</span>秒";
           document.getElementById(_showtimediv).innerHTML=_timestr;
       }else{
           //秒杀结束
            document.getElementById(_showtimediv).innerHTML="<spanclass="pim_time">0</span>天<spanclass="pim_time">0</span>小时<spanclass="pim_time">0</span>分钟<spanclass="pim_time">0</span>秒";
            document.getElementById(_showqdiv).innerHTML="<spanclass="btn_01"><ahref="/gz/sk/v/">  秒杀结束了！！！  </a></span>";
       }
   }
   //注意(_nowtime+1000)增加1秒
   setTimeout("ShowQTime(""+_showtimediv+"",""+_showqdiv+"",""+(_nowtime+1000)+"",""+_ms_begintime+"",""+_ms_endtime+"")",1000);
}
functionAJAXRequest(){
   varxmlObj=false;
   varCBfunc,ObjSelf;
   ObjSelf=this;
   try{xmlObj=newXMLHttpRequest;}
   catch(e){
       try{xmlObj=newActiveXObject("MSXML2.XMLHTTP");}
       catch(e2){
           try{xmlObj=newActiveXObject("Microsoft.XMLHTTP");}
           catch(e3){xmlObj=false;}
       }
   }
   if(!xmlObj)returnfalse;
   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)returnfalse;
       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);
       elsexmlObj.send(null);
   }
}
</script>
</body>
</html>

相关文章