当前位置:编程学习 > JAVA >>

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="" />

<script language="javascript" src="http://test.e.house.163.com/product/js/jquery.js"></script>

</head>

<body>

.

距活动开始还有:<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"; //这个是活动结束的时间戳

 

jQuery(document).ready(function() {

    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("1323158067288", _showtimediv, _showqdiv, _ms_begintime, _ms_endtime, _tryid,sourceid);     // 这里使用静态数字替代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) {

     &

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,