日期:2014-05-16  浏览次数:20517 次

JS服务器获取时间倒计时

?????? 最近,公司搞营销活动,搞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脚本

?