基于团购网站的倒计时,我们知道网站将为每个优惠活动(商品)设定一个结束时间,即到期时间,但是系统的时间到达结束时间,这意味着活动的结束,因此,我们必须用HTML定义活动的结束时间。
HTML
一个简单的时尚皮带男士手表,69元
值1354365003>
高强度无毒树脂材料榨汁机24元
值1350748800>
茶番茄青梅杨梅0.48元
值1346487780>
沙滩鞋男士户外凉鞋69元
值1367380800>
HTML代码,我们建立了一个名单,进行倒计时显示的图片和活动,最关键的是,我们定义的值的每个活动的结束时间:。结果属性值,该值是一个表示秒数自1970年1月1日号(PHP)产生的时代背景的。例如,结束时间2013-05-01可以通过PHP在12:00时转换为1367380800秒,和转换后的秒数可用于倒计时倒计时下jQuery。
CSS
我们实际上需要在页面列表中稍微看得更清楚一些。
。结果{字体大小:20px;font-family:微软雅黑;颜色:# 000 }
。prolist {保证金:10px汽车}
。prolist李{浮动:左;宽度:320px;身高:240px;保证金:10px;字体大小:14px;
位置:相对}
。prolist李IMG {宽度:320px;身高:198px;}
。欣欣{位置:绝对;顶部:174px;身高:24px;线高度:24px;
背景:# 333;颜色:# FFF;不透明度:6;显示:无}。
为了保存和预览页面效果,可以看到按顺序排列的活动列表。
jQuery
VaR *获取服务器时间= 1000; / /服务器时间的毫秒数
$(函数(){())
VaR DateTime =新的日期();
datetime.gettime VaR差异=(-获取服务器时间); / /客户端和服务器的时间偏移
setInterval(){()函数(
$(。结果),每个(函数(){)
var obj = $(this);
VaR结果=新的日期(parseInt(obj.attr(币值'))* 1000);
VaR带=新的日期();
VaR NMS = endtime.gettime()-()+差nowtime.gettime;
VaR MYD = math.floor(NMS /(1000×60×60×24); / /天)
VaR MYH = math.floor(NMS /(1000×60×60))% 24; / /小时
VaR MYM = math.floor(NMS /(1000×60))% 60 /分钟;
VaR MYS = math.floor(NMS / 1000)60 /秒%;
无功myms = math.floor(NMS / 100)% 10; / /瞬间
如果(MYD > = 0){
var str = MYD +日+小时MYH ++子MYM + +声音++ myms +二;
其他{ }
var结束!;
}
Obj.html(STR);
});
},100); / 0。每秒钟表演一次
});
我们先把服务器的时间,我们将倒计时时间与服务器时间一致,让每个客户都能看到倒计时是一样的,我们计算在客户端和服务器之间的时间偏移量,避免由于客户机与服务器时间不一致的倒计时同步的麻烦。当然,服务器需要的时间使用服务器的语言获得。在本文中,我们使用PHP获得的时间()函数获得秒数,并记住将其乘以1000毫秒。
我们设置一个定时器通过setInterval和执行代码里面setInterval每100毫秒。
然后在计时器中,我们使用jQuery的每个()方法遍历页面中的列表,并计算天数、小时、分钟和秒。
因为时间()函数的Javascript获取的毫秒数,它是 / 1000的计算过程。
我们不想在页面上显示所有倒计时,但我们需要用户在列表中滑动图片以显示相应的倒计时。因此,我们需要添加以下辅助代码。
$(函数(){())
$(。prolist李IMG)。每个(函数(){(){)
VaR img =美元(这);
Img.hover(function(){()
Img.next()表示();
}函数(){()
Img.next()()。隐藏;
});
});
});
最后的结果:
以上都是关于倒计时的,希望能帮助大家学习。