分条实现 倒计时

时间:2021-03-20 22:04:45

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>推送列表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.popular{

}

</style>
</head>

<body>
<%@ include file="../public/menu_top.jsp" %>
<div class="container">


<div class="row clearfix">
<div class="col-md-12 column">



<table class="table" align="center">

<caption> <h1>推送表</h1> </caption>


<thead>
<tr>
<th>
编号
</th>
<th>
类型
</th>
<th>
原因
</th>

<th>
时间间隔
</th>

<th>
内容
</th>
<th>
状态
</th>

<th>
创建时间
</th>
<th>
开始推送时间
</th>
<th>
倒计时
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>

<input type="hidden" id="tempLength" value="${fn:length(list) }" />


<c:forEach items="${list }" var="p" varStatus="status">
<tr name="popular" class=".popular">
<td name="index">
${status.index+1 }
</td>
<td>
${p.popuType eq 'popular'?'推送':'推广' }
</td>
<td width="10%">
${p.popuReason }
</td>
<td name="times">
${p.intervalTime }
</td>
<td width="10%">
${p.popuContent }
</td>
<td name="counter">
${p.popuStatus }
</td>
<td name="startTime">
${p.publishTime }
</td>
<td name="endTime">
${p.startTime }
</td>
<td name="showTime" title="showTime" width="20%">
<span name="t_d">00天</span>
<span name="t_h">00时</span>
<span name="t_m">00分</span>
<span name="t_s">00秒</span>
</td>
<td nowrap="nowrap" name="control">
<a class="btn btn-primary" name="stop" value="0" href="javascript:void(0);">暂停</a>
<a class="btn btn-primary" name="start" value="0" href="javascript:void(0);">启动</a>

</td>
</tr>

</c:forEach>


</tbody>
</table>
</div>
</div>



</div>

<!-- <h1>
<span id="t_d">00天</span>
<span id="t_h">00时</span>
<span id="t_m">00分</span>
<span id="t_s">00秒</span>
</h1> -->

</body>


<%@ include file="../public/footer_jsp.jsp" %>

<script type="text/javascript">

 


var tempLength = $("#tempLength").val() ;
var indexFlag = 0-0 ;
var stopState = false ;
var stopArr = new Array() ;
var startArr = new Array() ;


$(function(){
updateEndTime(indexFlag,0);

$("tr[class='.popular']").each(function(){

$(this).children("td[name='control']").children("a[name='start']").attr("disabled","true") ;

var indexFlagStop = $(this).children("td[name='index']").html()-0 ;

$(this).children("td[name='control']").children("a[name='stop']").bind("click",function(){
//alert("暂停"+indexFlag) ;
var value = $(this).attr("value") ;
//alert(value) ;
if(value==0){

stopArr[stopArr.length] = indexFlagStop ;

stopArr = unique(stopArr) ;

$(this).html("停止").attr("disabled","true") ;
//$(this).unbind("click") ;
var start = $(this).parent().parent().children("td[name='control']").children("a[name='start']") ;
start.removeAttr("disabled") ;
//start.bind("click",startFunction) ;

start.attr("value","0") ;


$(this).attr("value","1") ;

updateEndTime(indexFlagStop,1);

}



}) ;


$(this).children("td[name='control']").children("a[name='start']").bind("click",function(){
//alert("启动"+indexFlag) ;
var value = $(this).attr("value") ;
//alert(value) ;
if(value==0){
startArr[startArr.length] = indexFlagStop ;

startArr = unique(startArr) ;


$(this).html("恢复").attr("disabled","true") ;
// $(this).unbind("click") ;
var stop = $(this).parent().parent().children("td[name='control']").children("a[name='stop']") ;
stop.removeAttr("disabled") ;

$(this).attr("value","1") ;
//stop.bind("click",stopFunction) ;
stop.removeAttr("value").attr("value","0") ;


updateEndTime(indexFlagStop,2);
}
}) ;


}) ;

});


//倒计时函数
function updateEndTime(indexFlagArg,flag)
{

//alert(indexFlag) ;
var date = new Date();
var time = date.getTime(); //当前时间距1970年1月1日之间的毫秒数
var eachOneIndexFlag = false;
var eachOneIndex = 0-0 ;
$("tr[name='popular']").each(function(){
//创建时间
var eachOneIndexIn = $(this).children("td[name='index']").html()-0 ;
var startTime = $(this).children("td[name='startTime']").html() ;
var startTime01= new Date(startTime).getTime();
var times = $(this).children("td[name='times']").html() ;
var daojishi = (eval(times)*60*60*1000)-(time - startTime01 )%(eval(times)*60*60*1000)
var lag2 = daojishi; //当前时间和结束时间之间的秒数
var lag = lag2 / 1000; //当前时间和结束时间之间的秒数
if(lag > 0){
var second = Math.floor(lag % 60);
var minite = Math.floor((lag / 60) % 60);
var hour = Math.floor((lag / 3600) % 24);
var day = Math.floor((lag / 3600) / 24);
$(this).children("td[name='showTime']").children("span[name='t_d']").html(day + "天") ;
$(this).children("td[name='showTime']").children("span[name='t_h']").html(hour + "时") ;
$(this).children("td[name='showTime']").children("span[name='t_m']").html(minite + "分") ;
$(this).children("td[name='showTime']").children("span[name='t_s']").html(second + "秒") ;
if(day==0&&hour==0&&minite==0&&second==0){
//alert("推送一个吧") ;
}
}else{
$(this).children("td[name='showTime']").children("span[name='t_d']").html("XX天") ;
$(this).children("td[name='showTime']").children("span[name='t_h']").html("XX时") ;
$(this).children("td[name='showTime']").children("span[name='t_m']").html("XX分") ;
$(this).children("td[name='showTime']").children("span[name='t_s']").html("XX秒") ;
}
if(indexFlagArg!=0&&indexFlagArg==eachOneIndexIn){
//alert("indexFlagArg:"+indexFlagArg+"索引长度tempLength:"+tempLength+"数组长度stopArr.length:"+stopArr) ;
//alert("暂停的信息indexFlagArg:"+indexFlagArg+"stopArr.length:"+stopArr.length) ;
// alert("indexFlagArg:"+indexFlagArg+"startArr.length:"+startArr.length) ;
// alert($(this).children("td[title='showTime']").attr("name")+"flag:"+flag) ;
for(var i= 0 ; i<tempLength ; i++) { //遍历列表
if(flag==1){


for(var j= 0 ; j<stopArr.length ; j++) { //遍历数组

var stopIndex = stopArr[j] ;
//alert(j) ;
if(i==stopIndex){
//alert("暂停的索引:"+stopIndex+":"+$(this).children("td[title='showTime']").html()) ;
$(this).children("td[title='showTime']").attr("name","a") ;
}


}

}

else if (flag==2){
for(var m= 0 ; m<startArr.length ; m++ ) { //遍历数组
var startIndex = startArr[m] ;
if(i==startIndex){
// alert("启动的索引:"+startIndex)
$(this).children("td[title='showTime']").attr("name","showTime") ;
}
}

}







}




}
});

eachOneIndex = 0-0 ;

setTimeout(function() {
if (!eachOneIndexFlag) { //倒计 对所有的倒计时
updateEndTime(eachOneIndex-0,0);
}
}, 1000);



}



function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}


/* var aa = new Array("111","aaa","bbb","aaa") ;

var aaa = unique(aa) ;
alert(aaa) ; */





</script>


 

 

 

 

</html>