日期:2014-05-16 浏览次数:20553 次
?????? 最近,公司搞营销活动,搞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脚本
?