秒杀主要的一个问题就是剩余时间的计算,简单起见,先考虑获取客户端的当前时间(实际当前时间不能使用客户端的时间,客户端时间每个用户都可以自己设置,要以服务器端的时间为准)
计算剩余时间:
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> --显示剩余时间
脚本部分(可放在上面的页面部分之下)
<script language="JavaScript" type="text/javascript">
function showTime()
{
var dt1=new Date(document.getElementById("hdfTm1").value); --获取页面隐藏输入框的截至时间
var nowdt=new Date(); --获取当前时间(这个是客户端的时间)
document.getElementById("tm1").innerHTML=getTimerString(dt1.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>
---------------------------------------------------------------------
上面实际就是一个完整的简单的例子,只不过当前时间是取客户端的,相对来说不是很严谨。可以通过异步的方式(最简单的弄一个页面,就输出一个当前的服务器时间,然后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脚本
<script language="javascript" type="text/javascript">
function showTime()
{
var nowdt=new Date(); --获取当前时间(最好使用服务器端的时间,通过ajax异步去获取)
for(var i=0;i<4;i++) --使用一个循环来遍历,这里的4表示最多有4个
{
if(document.getElementById("hdfTm" + i.toString())!=null)
--这个判断很有必要,否则一旦产品没有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>