秒杀倒计时的js脚本

来源：互联网发布：nginx 入门指南 pdf 编辑：程序博客网时间：2024/04/29 21:16

秒杀主要的一个问题就是剩余时间的计算，简单起见，先考虑获取客户端的当前时间（实际当前时间不能使用客户端的时间，客户端时间每个用户都可以自己设置，要以服务器端的时间为准）

计算剩余时间：

1、当前时间：var nowdt=new Date();

2、截止时间：var dt=new Date("2012/10/01 12:00:21");

截止时间一般是数据库里读取的，简单的，在页面用个<input type="hidden" id="" value="">来传递给js，这里需要注意一下js的new Date后面的数据格式，主要是日期部分，是用/来区分年月日，如果默认是2012-10-01格式，就用js的replace函数替换一下。

3、计算两个时间的间隔

var tmspan=dt.getTime()-nowdt.getTime();

4、将时间间隔表现出来，就是用剩余**天**小时**分**秒来显示（使用一个函数）

    function getTimerString(time) {
                d = Math.floor(time / 86400000),
                h = Math.floor((time % 86400000) / 3600000),
                m = Math.floor(((time % 86400000) % 3600000) / 60000),
                s = Math.floor(((time % 86400000) % 3600000 % 60000) / 1000);
            if (time>0)
                return d + "天" + h + "小时" + m + "分" + s + "秒";
            else return "时间到";
        }

5、上面的都搞定，那就剩下刷新这个数据，一般是每隔一秒就刷一下，相对完整的一段代码

页面部分

<input type="hidden" id="hdfTm1" value="2012/09/28 12:21" /> --传值
<div id="tm1"></div> --显示剩余时间

脚本部分（可放在上面的页面部分之下）

---------------------------------------------------------------------

上面实际就是一个完整的简单的例子，只不过当前时间是取客户端的，相对来说不是很严谨。可以通过异步的方式（最简单的弄一个页面，就输出一个当前的服务器时间，然后js通过异步去获取这个时间），获取服务器端的时间来替换。

这是针对一个页面上只有一个倒计时的情况，如果有多个倒计时怎么办呢？

实际多个跟一个是一样的，无非在表现的地方js做个循环。

假设页面上有4个产品，需要显示倒计时（实际情况应该要考虑最多是4个，也需要考虑0个，1个等情况）

在页面上输出除倒计时之外的内容，应该不是难事，如果是asp.net，一个repeater再绑定一下数据就OK了。

<asp:Repeater ID="repSpike" runat="server">
         <ItemTemplate>
                   <div class="miaostime">
                            <span id="tm<%#Container.ItemIndex %>"></span>
                               <input type="hidden" id="hdfTm<%#Container.ItemIndex %>" value='<%#Convert.ToDateTime(Eval("EndDate")).ToString("yyyy-MM-dd HH:mm:ss") %>' />
                    </div>

<div>这里输出产品的其他信息（不考虑布局的情况）</div>
</ItemTemplate>
</asp:Repeater>

上面的是输出页面代码，下面是js脚本

            --这个判断很有必要，否则一旦产品没有4个，js脚本就会出错，加了这个判断，无论产品有或没有，1个或者4个都不会有问题
            {
                var dt=new Date(document.getElementById("hdfTm" + i.toString()).value.replace(/-/g,"/"));
                document.getElementById("tm" + i.toString()).innerHTML=getTimerString(dt.getTime()-nowdt.getTime());
            }
        }
        setTimeout("showTime();", 1000); --延时1秒重复执行
    }

    function getTimerString(time) {
                d = Math.floor(time / 86400000),
                h = Math.floor((time % 86400000) / 3600000),
                m = Math.floor(((time % 86400000) % 3600000) / 60000),
                s = Math.floor(((time % 86400000) % 3600000 % 60000) / 1000);
            if (time>0)
                return d + "天" + h + "小时" + m + "分" + s + "秒";
            else return "时间到";

        }

    showTime();
    </script>