一个页面多个记时js代码

一个页面多个倒计时js代码
粗略的整理下

解决需求：
1.解决一个页面多个倒计时
2.每隔一段时间与服务器校验一次时间
3.页面倒计时完毕后，先与服务器校验是否倒计时完毕，完毕则调用回调函数，否则继续倒计时

倒计时js函数：

/**
	 * 倒计时函数
	 * @param ids 元素id
	 * @param ifinvest 回调函数
	 * */
	function counts(ids,ifinvest){
		var interval,a=0,time,startt,tenderid;
		this.startcout=function(){
			startt = document.getElementById(ids).getAttribute("date-start");
			var nowtime = document.getElementById(ids).getAttribute("date-now");
			tenderid = document.getElementById(ids).getAttribute("tender-id");
			time = this.getSecond(startt,nowtime);
			if (!interval)
	            interval = setInterval(this.go, 1000);
		}
		this.go=function(){
			a++;
			--time;
			var str="";
			//--------------
			d = Math.floor(time / 86400),   
			h = Math.floor((time % 86400) / 3600),   
			m = Math.floor(((time % 86400) % 3600) / 60),   
			s = Math.floor(((time % 86400) % 3600) % 60); 
			
			if(a==300 || time <= 0){//每300秒与服务器校验时间
				a=0;
				$.ajax({//与服务器校验时间
					url : "web/getsysdatetime.do",
					type : "post",
					dataType : 'json',
					success : function(data) {
						var oStartDate = js_patch_getdate(startt+"");
						var oNowDate = js_patch_getdate(data+"");
						var startTime = oStartDate.getTime();
						var nowTime = oNowDate.getTime();
						time = (startTime-nowTime)>0?(startTime-nowTime)/1000:0;
						if(time<=0){
							clearInterval(interval);//清除倒计时
							ifinvest.starts();//成功的回调函数
						}
					},
					error:function(XMLHttpRequest, textStatus, errorThrown){
						clearInterval(interval);//清除倒计时
					}
				});
			}
			if (time>0){ 
				str = "<span class='day'>"+js_patch_fillZero(d, 2)+"</span>天<span class='day'>"+js_patch_fillZero(h, 2)+"</span>时<span class='day'>"+js_patch_fillZero(m, 2)+"</span>分<span class='day'>"+js_patch_fillZero(s, 2)+"</span>秒";
			}else{
				str = "<span class='day'>00</span>天<span class='day'>00</span>时<span class='day'>00</span>分<span class='day'>00</span>秒";
			}
			document.getElementById(ids).innerHTML = str;
		}
		this.getSecond=function(startdate,nowdate) {
			var oStartDate = js_patch_getdate(startdate+"");
			var oNowDate = js_patch_getdate(nowdate+"");
			
			var startTime = oStartDate.getTime();
			var nowTime = oNowDate.getTime();

			var second = (startTime-nowTime)>0?(startTime-nowTime)/1000:0;
			return second;
		}
	}
	
	/**
	 * 将字符串格式的日期（如：20150415092645）转换成js Date对象
	 * 注意Date对象的初始化方式
	 * */
	function js_patch_getdate(stime) {
		var datetime = new Date(
				parseFloat(stime.substr(0, 4)),
				parseFloat(stime.substr(4, 2) - 1),
				parseFloat(stime.substr(6, 2)),
				parseFloat(stime.substr(8, 2)),
				parseFloat(stime.substr(10, 2)),
				parseFloat(stime.substr(12, 2)));
		return datetime;
	}
	/**
	 * 格式化
	 * */
	function js_patch_fillZero(num, digit) {
		var str = '' + num;
		while (str.length < digit) {
			str = '0' + str;
		}
		return str;
	}

HTML：

<div id="timer0" tender-id="${tendermap.tender_id}" date-start="${tendermap.buy_start_time}" date-now="${starttime}">
		<span class="day">00</span>天<span class="day">00</span>时<span class="day">00</span>分<span class="day">00</span>秒
	</div>

调用：

//一般放到 $(document).ready(function() {});中
if(document.getElementById("timer0")!=null){
		var ifstarts = new if_startinvest("timer0", document.getElementById("timer0").getAttribute("tender-id"));
		var counts_1 = new counts("timer0",ifstarts);
		counts_1.startcout();
	}

一个页面多个记时js代码

相关推荐