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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python中用于计算对数的log()方法
2015/05/15 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
大学生自荐书范文
2013/12/10 职场文书
经典演讲稿范文
2013/12/30 职场文书
项目管理计划书
2014/01/09 职场文书
学生喝酒检讨书
2014/02/06 职场文书
母婴店促销方案
2014/03/05 职场文书
优秀教研组申报材料
2014/12/26 职场文书
邀请函的格式
2015/01/30 职场文书
警告通知
2015/04/25 职场文书
同意报考公务员证明
2015/06/17 职场文书
实践论读书笔记
2015/06/29 职场文书
离婚财产分割协议书
2015/08/11 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL