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>

距活动开始还有：

参加秒杀！！！

　　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 = "0天0小时0分钟0秒";

document.getElementById(_showqdiv).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(_showtimediv).innerHTML = _timestr;

　　}else {

　　//秒杀结束

document.getElementById(_showtimediv).innerHTML = "0天0小时0分钟0秒";

document.getElementById(_showqdiv).innerHTML = "<a href='/gz/sk/v/'> 秒杀结束了！！！ </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>

教程首页更多教程

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

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