列表页中使用倒计时

列表页中使用倒计时

效果

1. css

	       <c:forEach items="${objList}" var="item" varStatus="status">
		           <li id="${item.id}">
			           <div style="width: 100%;">
				           	<table style="width: 100%;table-layout: fixed;">
				            	<tr>
					            	<td style=" width: 49%; min-width: 20px;" onclick="window.location.href='${sbsuser}/chakan_gkzx_wz?id=${item.id}'">
					            		<!-- 标题 -->
										<div style="margin-left: -4px;">  
											<img alt="" src="${ctxStatic2}/img/tijiao.png" class="img"  style="width: 48%; border-radius: 11px;">
											<span class="spanText" >烘干消毒</span>
										</div>	
										<div>
											<div class="inputdiv" style="margin-top: 12px;">
												<label class="label">消毒物品 :</label><input type="text" class="input" style="border: 0px;outline: none;    width: 61%; font-size:12px;" value="${item.name}" readonly="readonly" />
											</div>
											<div class="inputdiv" >
												<label class="label">开始时间 :</label><input type="text" class="input" style="border: 0px;outline: none;    width: 61%; font-size:12px;" value="<fmt:formatDate value="${item.startime}"  type="both"/>" readonly="readonly" />
											</div>
											<div class="inputdiv" >
												<label class="label">结束时间 :</label><input type="text" class="input" style="border: 0px;outline: none;    width: 61%; font-size:12px;" value="<fmt:formatDate value="${item.endtime}" type="both"/>" readonly="readonly" />
											</div>
											<div class="inputdiv" >
												<label class="label">操作人员 :</label><input type="text" class="input" style="border: 0px;outline: none;    width: 61%; font-size:12px;" value="${item.createuser.name}" readonly="readonly" />
											</div>
											<div class="inputdiv" >
												<label class="label">备注 :</label><input type="text" class="input" style="border: 0px;outline: none;    width: 61%; font-size:12px;" value="${item.bz}" readonly="readonly" />
											</div>
										</div>
					            	</td>
					            	<td style="width: 42% " onclick="window.location.href='${sbsuser}/chakan_gkzx_wz?id=${item.id}'">
					            			<span style="position: relative; top: 9%; right:-13%;"> <span style="color: red;font-size: 12px;" id="timer${item.id}" > 消毒倒计时:00:00:00 </span> </span>
					            			<div style="background: #d4c496; width: 70%; margin: auto; height: 116px; margin-top: 20px; ">
  												  <img alt="" src="${ctximg}/${item.pic}" style="position: static; width: 100%; height: 100%;">
  										    </div>	
					            	</td>
				            	</tr>
				           	</table>
			          	</div>
		          </li>
		          
		          
	          </c:forEach>
         </ul>

2.JS

var housePointList = [<c:forEach items="${objList}" var="obj"> {statime:"${obj.st}",endtime:"${obj.et}",id:"${obj.id}"},</c:forEach>];
	
	for (var i = 0; i < housePointList.length; i++) { 
		console.log(i);
		var startTime=housePointList[i].statime;//开始时间
	    var endTime=housePointList[i].endtime; //结束时间
	    var id=housePointList[i].id;
	    this.djs(this.startTime,this.endTime,this.id);
	}
	
	//倒计时
	function djs (startTime,endTime,id) {
		 setInterval(function(){
		        var ts =endTime-startTime;//计算剩余的毫秒数
		        var dd = parseInt(ts   /60 / 60 / 24);//计算剩余的天数
		        var hh = parseInt(ts  / 60 / 60 % 24);//计算剩余的小时数
		        var mm = parseInt(ts  / 60 % 60);//计算剩余的分钟数
		        var ss = parseInt(ts  % 60);//计算剩余的秒数
		        dd = checkTime(dd);
		        hh = checkTime(hh);
		        mm = checkTime(mm);
		        ss = checkTime(ss);
		        if(ts>0){
		        	$("#timer"+id).text( "消毒倒计时:"+hh + "时" + mm + "分" + ss + "秒");
		            startTime++;
		        }else if(ts<0){
		        	$("#timer"+id).text("消毒倒计时:已完成");
		　　　　　　　	/* location.reload(); */
		        }
		    },1000);
		    function checkTime(i){
		        if (i <= 10) {
		            i = "0" + i;
		        }
		        return i;
		    } 
		
	}