最近,公司搞营销活动,搞1元抢某某之类的形式,不管他是什么形式,页面设计的倒计时,应该与服务器的时间基本一致。我来说说我的做法,首先用户打开页面,第一次加载页面信息的时候,把服务器的时间传到页面,然后页面与倒计时的时间作比较,计算差值,进行倒计时。
这么做也有一个弊端,假如说用户的网络比较长,请求的时间比较长,倒计时所看到的时间与服务器的时间相差还是蛮大的,如果JS取的是用户客户端的时间,时间就很不准确,综合上述:还是第一次取服务器时间,然后用这个时间作基准倒计时,网络慢的用户,呵呵,抢不到也没办法。
下面是我倒计时的JS,留着以后用的时候参考:
/**
* @时间倒计时脚本(从服务器获取时间倒计时)
* @author:lizhenbin
* @date: 2011年12月30日
*/
var endtimes = $("#_dateEndTime").val(); //后台获取每天结束时间(字符串)
var begintimes = $("#_dateBeginTime").val();
var nowtimes; //服务器时间
//获取服务器时间
function givetime(){
var _s_today = $("#_dateCurrentTime").val(); //获取服务器时间(字符串)
nowtimes = new Date(_s_today);
window.setTimeout("DownCount()",1000)
}
//正常时间
function DownCount(){
nowtimes = Number(nowtimes) + 1000; //当前时间
var theDay = new Date(endtimes); //结束时间
var beginDay = new Date(begintimes); //倒计时开始时间
theDay = theDay++;
if(theDay < nowtimes){
//表示倒计时时间已经完成
$("#showHour").html('00');
$("#showMin").html('00');
$("#showSencond").html('00');
}else if(beginDay > nowtimes) {
//时间未到
$("#showHour").html('00');
$("#showMin").html('00');
$("#showSencond").html('00');
}else{
//倒计时
timechange(theDay);
}
window.setTimeout("DownCount()",1000)
}
//时间修改
function timechange(theDay){
var theDays = new Date(theDay);
var seconds = (theDays - nowtimes)/1000;
var minutes = Math.floor(seconds/60);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);
var CDay= days;
var CHour= hours % 24;
var CMinute= minutes % 60;
var CSecond= seconds % 60;
var CHour=CHour+CDay*24;
//当前时间参数
var _t_minute = CMinute;
var _t_hour = CHour;
var _t_second = CSecond;
if(CMinute < 10) {
CMinute = "0" + CMinute;
}
if(CHour < 10) {
CHour = "0" + CHour;
}
if(CSecond<10) {
CSecond = "0" + CSecond;
}
//显示倒计时
$("#showHour").html(CHour);
$("#showMin").html(CMinute);
$("#showSencond").html(CSecond);
if(CHour=='00' && CMinute=='00' && CSecond=='00') {
//时间到自动刷新页面
//alert("倒计时结束,刷新页面");
$("#_s_city1").html("");
$("#_s_city2").html("");
$city = $('#_s_city1').empty();
var $a = $('<a href="#"/>').addClass('button');
$a.click(function() {
check('20110223042027232060', '20111212033222948216','20110223042027232060', '20111206033838490187' ,'2');
});
var $img = $('<img src="360images/index_20.jpg"/>');
$city.append($a.append($img));
$city2 = $('#_s_city2').empty();
var $a2 = $('<a href="#"/>').addClass('button');
$a2.click(function() {
check('20110223042027232060', '20111212033222948216','20110223042027232060', '20111206033838490187' ,'1');
});
var $img2 = $('<img src="360images/index_20.jpg"/>');
$city2.append($a2.append($img2));
}
}
givetime(); //执行js脚本