首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 实现 秒杀,团购 倒计时展示的记录 分享

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
手机开发必备技巧：javascript及CSS功能代码分享
May 25 Javascript
每天一篇javascript学习小结（属性定义方法）
Nov 19 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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
shell脚本(1) pycryto(1) 曝光融合(1) 高动态范围(1) key(1) 公共键(1) HDR(1) 连接器(1) kafka(2) 数据加密(1)
You might like
PHP 正则表达式常用函数
2014/08/17 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
自学python的建议和周期预算
2019/01/30 Python
Python新手如何理解循环加载模块
2020/05/29 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
pycharm 2020.2.4 pip install Flask 报错 Error：Non-zero exit code的问题
2020/12/04 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
C#面试问题
2016/07/29 面试题
应届生求职信写作技巧
2013/10/24 职场文书
模具专业推荐信
2013/10/30 职场文书
社区志愿者心得体会
2014/01/03 职场文书
年度考核自我评价
2014/01/25 职场文书
总经理岗位职责描述
2014/02/08 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
10的分与合教学反思
2014/04/30 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
小学生节水倡议书
2015/04/29 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server