先看效果
//列表的的效果

//單個效果

    
 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();
}):


  

JavaScript 計時器,倒計時