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


Posted in Javascript onJuly 12, 2013

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

<!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>
Javascript 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
浅说js变量
May 25 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 #Javascript
jquery 滚动条事件简单实例
Jul 12 #Javascript
简约JS日历控件 实例代码
Jul 12 #Javascript
javascript中自定义对象的属性方法分享
Jul 12 #Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 #Javascript
javascript中的parseInt和parseFloat区别
Jul 12 #Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP判断是否有Get参数的方法
2014/05/05 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Python性能优化的20条建议
2014/10/25 Python
Python中__name__的使用实例
2015/04/14 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
工程总经理工作职责
2013/12/09 职场文书
法学专业自我鉴定
2014/02/05 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
通知的格式范文
2015/04/27 职场文书