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

网络编程 2025/5/18 佚名

3 2 1

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

复制代码代码如下:
<!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" name="robots" />
<meta name="author" content="" />
</head>
<body onload='start()'>
.
距活动开始还有： 
.
 

  参加秒杀！！！   

.
<script type="text/javascript">
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>

倒计时,展示,记录

标签：

倒计时,展示,记录

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

白云城资源网 Copyright www.dyhadc.com

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

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

暂无“javascript 实现秒杀,团购倒计时展示的记录分享”评论...

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

倒计时,展示,记录

JavaScript获取FCK编辑器信息的具体方法

jquery实现微博文字输入框输入时显示输入字数效果实现

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

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

倒计时,展示,记录

JavaScript获取FCK编辑器信息的具体方法

jquery实现微博文字输入框 输入时显示输入字数 效果实现

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

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

jquery实现微博文字输入框输入时显示输入字数效果实现

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