javascript 实现 秒杀,团购 倒计时展示的记录 分享
最近做了一个房产的秒杀，团购的电子商务网站(房子也有秒杀，出手不小啊)，其中里面有一个秒杀的倒计时展示，主要是判断当前时间距离秒杀开始还有多少时间，还有秒杀开始和秒杀结束的各种展示。
其中最主要的一点就是所谓的当前时间不能使用浏览器通过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()'>
.
距活动开始还有：<span id="sk_time"></span> <!-- 这个是倒计时的显示 -->
.
<br/>
<span id="wyz">
<span class="btn_02"> 参加秒杀！！！ </span> <!-- 这个是秒杀按钮，倒计时为0时会变成可以秒杀的样式 -->
</span>
.
<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 = "<span class='pim_time'>0</span>天<span class='pim_time'>0</span>小时<span class='pim_time'>0</span>分钟<span class='pim_time'>0</span>秒";
document.getElementById(_showqdiv).innerHTML = "<span class='btn_01'><a href='/gz/sk/v/'> 秒杀开始了！！！ </a></span>";
} 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 += "<span class='pim_time'>" + snd.substring(0, 1) + snd.substring(1, 2) +"</span>天";
var snH = nH.toString();
if (snH.length == 1) {
snH = "0" + snH;
}
_timestr += "<span class='pim_time'>" + snH.substring(0, 1) + snH.substring(1, 2) +"</span>小时";
var snM = nM.toString();
if (snM.length == 1) {
snM = "0" + snM;
}
_timestr += "<span class='pim_time'>" + snM.substring(0, 1) + snM.substring(1, 2) +"</span>分钟";
var snS = nS.toString();
if (snS.length == 1) {
snS = "0" + snS;
}
_timestr += "<span class='pim_time'>" + snS.substring(0, 1) + snS.substring(1, 2) +"</span>秒";
document.getElementById(_showtimediv).innerHTML = _timestr;
}else {
//秒杀结束
document.getElementById(_showtimediv).innerHTML = "<span class='pim_time'>0</span>天<span class='pim_time'>0</span>小时<span class='pim_time'>0</span>分钟<span class='pim_time'>0</span>秒";
document.getElementById(_showqdiv).innerHTML = "<span class='btn_01'><a href='/gz/sk/v/'> 秒杀结束了！！！ </a></span>";
}
}
//注意 (_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>
相关推荐
-
Android开发必备：秒杀真机超快模拟器Genymotion介绍
第一,这货速度太快,第二,模仿真机环境,第三,秒杀任何Android模拟器包括真机,不多说上图,我忒忙! 官网: http://www.genymotion.com/ 镜像图片可以创建多个模拟器 关键是有一切Google的服务,在Google眼里就是一个真机 骚年不知道外界的Android,已经发生了翻天覆地的变化!
-
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
我们知道数据库处理sql是一条条处理的,假设购买商品的流程是这样的: sql1:查询商品库存 if(库存数量 > 0) { //生成订单... sql2:库存-1 } 当没有并发时,上面的流程看起来是如此完美,假设同时两个人下单,而库存只有1个了,在sql1阶段两个人查询到的库存都是>0的,于是最终都执行了sql2,库存最后变为-1,超售了,要么补库存,要么等用户投诉吧. 解决这个问题比较流行的思路: 1.用额外的单进程处理一个队列,下单请求放到队列里,一个个处理,就不会有并发的问题了,但是要
-
限时抢购秒杀系统架构分析与实战
1 秒杀业务分析 正常电子商务流程 (1)查询商品:(2)创建订单:(3)扣减库存:(4)更新订单:(5)付款:(6)卖家发货 秒杀业务的特性 (1)低廉价格:(2)大幅推广:(3)瞬时售空:(4)一般是定时上架:(5)时间短.瞬时并发量高: 2 秒杀技术挑战 假设某网站秒杀活动只推出一件商品,预计会吸引1万人参加活动,也就说最大并发请求数是10000,秒杀系统需要面对的技术挑战有: 对现有网站业务造成冲击 秒杀活动只是网站营销的一个附加活动,这个活动具有时间短,并发访问量大的特点,如果和网站原
-
PHP 类商品秒杀计时实现代码
要求要有小时分钟秒的实时倒计时的显示,用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准). 其实这和很多的考试等系统的时间限制功能同样的要求. 总不能用ajax每秒都获取服务器时间吧,所以实时倒计时一定要用javascript实现.这很简单,网上一大把的例子. 现在问题是解决用户端修改日期时间对我们的显示的影响. 解决的办法是计算出用户端的时间和服务器的时间差,这样问题的完成解决了. 这样只需要运行一次php,实时倒计时的时间就和服务器的时间同步了. 理论是同步的,但实际测试
-
jquery 倒计时效果实现秒杀思路
复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59","#colockbox1"); }); function countDown(time,id){ var day_elem = $(id).find('.day'); var hour_elem = $(id).find('.hour'); var minute_
-
java实现京东秒杀功能分享 京东秒杀软件
简单介绍下功能 1.每隔一段时间(比如1分钟)在京东手机每日一秒杀页面提取产品(手机)链接. http://sale.360buy.com/act/8VTHFGr10CjMDyZ.html#01 2.根据提取到得产品链接给后台发送数据,以便获取产品价格,描述,折扣,库存(是否有货)等信息. 3.根据得到的信息,进行判断. 若符合条件自动调用浏览器(前提是chrome加入环境变量,或者改代码将浏览器.exe路径加入代码,修改程序)打开产品订购页面. 4.其实也就解决了一个问题:不用自己频繁的刷新网
-
php结合redis实现高并发下的抢购、秒杀功能的实例
抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个: 1 高并发对数据库产生的压力 2 竞争状态下如何解决库存的正确减少("超卖"问题) 对于第一个问题,已经很容易想到用缓存来处理抢购,避免直接操作数据库,例如使用Redis. 重点在于第二个问题 常规写法: 查询出对应商品的库存,看是否大于0,然后执行生成订单等操作,但是在判断库存是否大于0处,如果在高并发下就会有问题,导致库存量出现负数 <?php $conn=mysql_connect("localho
-
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页
-
如何设计一个秒杀系统
什么是秒杀 秒杀场景一般会在电商网站举行一些活动或者节假日在12306网站上抢票时遇到.对于电商网站中一些稀缺或者特价商品,电商网站一般会在约定时间点对其进行限量销售,因为这些商品的特殊性,会吸引大量用户前来抢购,并且会在约定的时间点同时在秒杀页面进行抢购. 秒杀系统场景特点 秒杀时大量用户会在同一时间同时进行抢购,网站瞬时访问流量激增. 秒杀一般是访问请求数量远远大于库存数量,只有少部分用户能够秒杀成功. 秒杀业务流程比较简单,一般就是下订单减库存. 秒杀架构设计理念 限流: 鉴于只有少部分用
-
javascript 实现 秒杀,团购 倒计时展示的记录 分享
最近做了一个房产的秒杀,团购的电子商务网站(房子也有秒杀,出手不小啊),其中里面有一个秒杀的倒计时展示,主要是判断当前时间距离秒杀开始还有多少时间,还有秒杀开始和秒杀结束的各种展示.其中最主要的一点就是所谓的当前时间不能使用浏览器通过new Date()获取的客户端时间,这样只要用户修改了自己的机器时间那么倒计时就会乱透了,所以这个当前时间必须使用的是服务器时间,所以采用的是静态缓存页面所以这个当前时间使用ajax方式进行获取 复制代码 代码如下: <!DOCTYPE html PUBLIC &qu
-
jQuery团购倒计时特效实现方法
本文实例讲述了jQuery团购倒计时特效实现方法.分享给大家供大家参考.具体实现方法如下: <!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"> &
-
基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项
-
团购、定时抢购倒计时js版
团购.定时抢购倒计时 var tms = []; var day = []; var hour = []; var minute = []; var second = []; function takeCount() { setTimeout("takeCount()", 1000); for (var i = 0, j = tms.length; i 剩余时间: 0 天 0 小时 0 分 0 秒 tms[tms.length] = "168935343345";
-
C#结合JavaScript实现秒杀倒计时的方法
本文实例讲述了C#结合JavaScript实现秒杀倒计时的方法.分享给大家供大家参考.具体如下: 最近做个秒杀活动,要用到倒计时.要求每周三上午10:00开始倒计时 private string Dtime() { byte tempB = (byte)DateTime.Now.DayOfWeek; byte dayByte = (byte)DayOfWeek.Wednesday; DateTime wednesdayNow = DateTime.Now.AddDays(dayByte - te
-
JavaScript实现秒杀时钟倒计时
本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码,供大家参考,具体内容如下 功能介绍: 1.时/分/秒倒计时直至为零 所有代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <style type="text/css"> *{ margin:0; padding:
-
javascript电商网站抢购倒计时效果实现
本文实例讲述了javascript电商网站抢购倒计时效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>团购--限时抢</title> </head> &
-
iOS中使用UItableviewcell实现团购和微博界面的示例
使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文件控件tag值操作 数据模型部分: YYtg.h文件 复制代码 代码如下: // // YYtg.h // 01-团购数据显示(没有配套的类) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserv
-
Android仿拉手网团购App产品详情界面效果
先给大家展示下效果图,如果感觉还不错,请参考实例代码. 效果图如下所示: 具体代码如下所示: activity_detail.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.an
-
Android仿拉手网团购App我的收藏界面实例代码
先给大家展示效果图,如果感觉还不错,请参考实例代码 效果图如下所示: 具体代码如下: private void initData() { BmobManager.getInstance(new BmobQueryCallback() { @Override public void onQuerySuccess(List<? extends BaseModel> dataList) { mDataList.clear(); List<FavorModel> list = (List&