列表页中使用倒计时
效果
- 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;
}
}