JavaScript 计时器,倒计时

于 2014-07-08 11:13:26 发布 · 150 阅读

文章标签：

#timer #计时器 #倒计时

javascript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个简单的JavaScript倒计时插件，用于显示活动开始、结束时间，支持自定义格式和多种时间单位。插件适用于网页中显示活动时间的倒计时，并在活动开始或结束时切换显示内容。

先看效果
//列表的的效果
[img]http://dl2.iteye.com/upload/attachment/0098/8759/8af70134-d881-3f85-8d4c-7fd49cc2ab0d.jpg[/img]
//单个效果
[img]http://dl2.iteye.com/upload/attachment/0098/8761/dc2a56aa-2ed2-3fbe-90e0-055660149995.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0098/8765/19ce3573-ffa3-38a9-b852-6fecd0c766d4.jpg[/img]


 var bjtimer={
			sysTime:0,  //服务器时间毫秒数
			timeBodyName:"timecontainer", //显示时间的容器
			timeBodyTag:"div",
			showFmt:"dd天HH时mm分ss秒",
			notstartMsg:"即将开始:",
			startingMsg:"剩余时间:",
			afterStart:"活动进行中", //开始后的内容
			afterEnd:"活动已结束",  //结束后是否设置 提示内容
			stimeAttName:"stime",  //自定义属性
			etimeAttName:"etime",
			onlyFmt:"showFmt",  //单个元素的格式
			notstartHead:"nsmsg",
			startingHead:"simsg",
			showDay:true,  //是否采用天
			fmt_24:true, //是否采用  24小时格式
			isUnion:true,  //开始后,时候进去 倒计时 剩余时间 
			timeOutArr:new Array(),  //保存启动了的计时器对象,用于清除
			startTimerOut:function(){
				if(bjtimer.sysTime <=0){
					alert("请先设置bjtimer.sysTimer为服务器时间");
					return;
				}else{
					var timeBodyArray =bjtimer.getElesByName(bjtimer.timeBodyTag,bjtimer.timeBodyName);
				    for(var i=0;i<timeBodyArray.length;i++){
				    	clearTimeout(bjtimer.timeOutArr[i]); //清空
				    	var ele=timeBodyArray[i];
				    	//获取元素的自定义属性
				    	var stimenode=ele.attributes[bjtimer.stimeAttName];
				    	var etimenode=ele.attributes[bjtimer.etimeAttName];
				    	var fmtnode=ele.attributes[bjtimer.onlyFmt];
				    	var nsnode=ele.attributes[bjtimer.notstartHead];
				    	var sinode=ele.attributes[bjtimer.startingHead];

				    	var stime=0;
				    	var etime=0;
				    	var onlyfmt=bjtimer.showFmt;
				    	var nsmsg=bjtimer.notstartMsg;
				    	var simsg=bjtimer.startingMsg;

				    	if(stimenode!=null || !stimenode===undefined){
				    		if(stimenode.nodeValue.indexOf("/")!=-1){
				    			stime=converToDate(stimenode.nodeValue);
				    		}else{
				    			stime=stimenode.nodeValue;
				    		}
				    	}
				    	if(etimenode!=null || !etimenode===undefined){
				    		if(etimenode.nodeValue.indexOf("/")!=-1){
				    			etime=converToDate(etimenode.nodeValue);
				    		}else{
				    			etime=etimenode.nodeValue;
				    		}
				    	}

				    	if(fmtnode!=null || !fmtnode===undefined){
				    		onlyfmt=fmtnode.nodeValue;
				    	}
				    	if(nsnode!=null || !nsnode===undefined){
				    		nsmsg=nsnode.nodeValue;
				    	}
				    	if(sinode!=null || !sinode===undefined){
				    		simsg=sinode.nodeValue;
				    	}
				    	//启用计时器
				    	bjtimer.timerOutRun(ele,stime,etime,bjtimer.sysTime,i,onlyfmt,nsmsg,simsg);
				    }
				}
			},
			timerOutRun:function(ele,stime,etime,systime,i,showFmt,nsmsg,simsg){
				var remainTime=0;
				var type=1;  //默认为为开始
				if(stime > systime){
					type=1; //未开始
					remainTime= stime - systime;
				}else{
					if(bjtimer.isUnion){
						type=0; //将结束
						remainTime= etime - systime;
					}
				}
				var nD = 0;
				var nH = 0;
				if(bjtimer.showDay){
					nD = parseInt(remainTime/(1000*60*60*24));
					nH = parseInt(remainTime/(1000*60*60)) % 24;   
				}else{
					nH = parseInt(remainTime/(1000*60*60));   
				}
			    var nM = parseInt(remainTime/(1000*60)) % 60;   
			    var nS = parseInt(remainTime/1000) % 60;   
			    if(bjtimer.fmt_24){
			    	nD=nD < 10 ? "0"+nD : nD;
			    	nH=nH < 10 ? "0"+nH : nH;
			    	nM=nM < 10 ? "0"+nM : nM;
			    	nS=nS < 10 ? "0"+nS : nS;
			    }
			    var showCont=showFmt;
				showCont=showCont.replace("dd",nD);
				showCont=showCont.replace("HH",nH);
				showCont=showCont.replace("mm",nM);
				showCont=showCont.replace("ss",nS);
				if(type==1){
					showCont=nsmsg+showCont;
					stime=stime-1000;
				}else{
					showCont=simsg+showCont;
					etime=etime-1000;
				}

				if(remainTime<=0){
					clearTimeout(bjtimer.timeOutArr[i]);
					var msg = (type==1) ? bjtimer.afterStart : bjtimer.afterEnd;
					if(msg!=""){
						ele.innerHTML=msg;
					}else{
						ele.innerHTML=showCont;
					}
				}else{
					ele.innerHTML=showCont;
					bjtimer.timeOutArr[i]=setTimeout(function(){bjtimer.timerOutRun(ele,stime,etime,systime,i,showFmt,nsmsg,simsg);},1000); //bjtimer.timerOutRun("+ele+","+stime+","+etime+","+i+")"	
				}
			},
			getElesByName:function(tag, name){
			    var returns = document.getElementsByName(name);
			    if(returns.length > 0) return returns;
			    returns = new Array();
			    var e = document.getElementsByTagName(tag);
			    for(var i = 0; i < e.length; i++){
			        if(e[i].getAttribute("name") == name){
			            returns[returns.length] = e[i];
			        }
			    }
			    return returns;
			},isToday:function(systime,ctime){
				return systime.getFullYear()==ctime.getFullYear() && systime.getMonth()==ctime.getMonth() && systime.getDate()==ctime.getDate();
			},dateDiff:function(stime,etime){//计算两个时间 相差的天数
				return (stime-etime)/(1000*3600*24);
			}

	}

//用法
列表的用法一般用在div ul > li 里面
可支持不同div ,li 显示的倒计时格式不一样



//注意 要显示 倒计时的 标签名字为 timecontainer 然后在这个表情上自定义属性 stime etime, showFmt,notstartMsg  等属性,

<div class="rest_time" name="timecontainer" stime="<fmt:formatDate value="${brandhd.starttime}" pattern="yyyy/MM/dd HH:mm:ss"/>" etime="<fmt:formatDate value="${brandhd.endtime}" pattern="yyyy/MM/dd HH:mm:ss"/>" ></div>

然后在窗体加载事件里面写
$(functtion(){
bjtimer.sysTime=systimes.getTime();  //系统的 毫秒数
bjtimer.startTimerOut();
});

//例2:



<!--计时开始-->
  <div class="g_timer_wrap">
     <div class="g_timer" id="g_timer" name="timecontainer" nsmsg="距活动开始还有：" simsg="距活动结束还有：" showFmt="[i]dd[/i]天[i]HH[/i]时[i]mm[/i]分[i]ss[/i]秒" stime="<fmt:formatDate value="${superBrandHd.starttime}" pattern="yyyy/MM/dd HH:mm:ss"/>" etime="<fmt:formatDate value="${superBrandHd.endtime}" pattern="yyyy/MM/dd HH:mm:ss"/>">
     </div>
  </div>

$(function(){
bjtimer.sysTime=converToDate('<%=sysdate%>').getTime(); 
bjtimer.startTimerOut();
}):