一，倒计时设计
以下是试用的倒计时范例，有三个时间点：试用申请开始时间，试用申请结束时间，试用报告提交截止时间，要根据这三个时间点进入不同的倒计时阶段
HTML:
<span style="font-size:18px;"><span style="font-size:18px;"><c:if test="${!empty tryoutArray}">
<div class="area-5" id="area-5">
<div class="title-div"><img src="" height="66" width="1120"/></div>
<div class="area-main">
<c:forEach items="${tryoutArray}" var="o">
<c:choose>
<c:when test="${o.get('status') == 1}">
<c:set var="btnClass" value="btn-1"/>
<c:set var="btnValue" value="立即申请"/>
</c:when>
<c:when test="${o.get('status') == 2}">
<c:set var="btnClass" value="btn-0"/>
<c:set var="btnValue" value="即将开始"/>
</c:when>
<c:when test="${o.get('status') == 4}">
<c:set var="btnClass" value="btn-2"/>
<c:set var="btnValue" value="体验中"/>
</c:when>
</c:choose>
<div class="pic-txt pic-txta">
<div class="img-area">
<a href="${o.get('tryoutUrl')}" target="_blank">
<img src="${o.get('picUrl')}" width="680" height="340" alt="${o.get('name')}">
</a>
<!-- 倒计时 -->
<div class="time">
<div class="count-down count-downa count-down-fir" data-state="${o.get('status')}" data-startDate="${o.get('startDate')}" data-endDate="${o.get('endDate')}"></div>
<div class="count-down count-downa count-down-sec" data-state="${o.get('status')}" data-startDate="${o.get('endDate')}" data-endDate="${o.get('reportTime')}"></div>
</div>
<span class="end-time"> </span>
</div>
<div class="txt-area">
<dl>
<dt>
<a href="${o.get('tryoutUrl')}" target="_blank">${o.get("name")}</a>
</dt>
<dd>
<div class="price"> 价值：<em>￥</em><em class="fs-24">${o.get("productPrice")}</em> </div>
<div class="provide"> 试用名额：<em class="fs-24 greenq-font">${o.get("tryNum")}</em>名 </div>
<div class="num"> 已申请：<em class="fs-24 greenq-font">${o.get("applyNum")}</em>人 </div>
</dd>
</dl>
<p class="try-time">活动时间：${o.get("startDate")}--${o.get("endDate")}</p>
<a href="${o.get('tryoutUrl')}" target="_blank" class="btn ${btnClass}">${btnValue}</a>
</div>
</div>
</c:forEach>
</div>
</div>
</c:if> </span>
</span>
javaScript:
<span style="font-size:18px;"><!--倒计时js -->
<script src="http://js.3conline.com/min/temp/v1/dpl-$.countDown.js"></script>
<script type="text/javascript">
var itemLen = $(".count-down").length;
for ( var i = 0; i < itemLen; i++) {
var itemT = $(".count-down").eq(i);
var data_state = itemT.attr("data-state");
countFunc_run(itemT, i, data_state, '${now}');
}
//倒计时
function countFunc_run(id, k, state, timeStamp){
var btn = $(id).parent().parent().parent().find('.btn');//此处运用jQuery抓取html元素的方法获取按钮位置
$(id).countdown({
rootTime: timeStamp,
// d:h:m:s（默认）、h:m:s、m:s
willbe:{
format : function(time) {
if($(id).hasClass('count-down-fir')){
var timeText = (state == 2) ? "距申请开始还有" : "距申请结束还有";
var str = "<span class='icon-count'></span>"
+ timeText
+ " : <em class='count-days'>"
+ time.day
+ "</em>天<em class='count-hours'>"
+ time.hour
+ "</em>时<em class='count-minutes'>"
+ time.min
+ "</em>分<em class='count-seconds'>"
+ time.sec + "</em>秒";
$(id).html(str);
$(id).show();
}
},
callback:function() {
if($(id).hasClass('count-down-fir')){
$(btn).html("即将开始").addClass("btn-0");
}
}
},
start:{
format : function(time) {if($(id).hasClass('count-down-fir')){
timeText = "距离申请结束还有";
var str = "<span class='icon-count'></span>"
+ timeText
+ " : <em class='count-days'>"
+ time.day
+ "</em>天<em class='count-hours'>"
+ time.hour
+ "</em>时<em class='count-minutes'>"
+ time.min
+ "</em>分<em class='count-seconds'>"
+ time.sec + "</em>秒";
$(id).html(str);
$(id).show();
}
},
callback:function() {
if($(id).hasClass('count-down-fir')){
$(btn).html("立即申请").addClass("btn-1");
$(btn).html("立即申请")[0].className = "btn btn-1";
}
if($(id).hasClass('count-down-sec')){
$(id).hide();//隐藏倒计时功能
$(btn).html("体验中").addClass("btn-2");
}
}
},
end:{
format : function(time) {
},
callback : function() {
if($(id).hasClass('count-down-sec')){
var parent = $(id).parent().parent().parent();
$(parent).hide();
}
if($(id).hasClass('count-down-fir')){
$(id).hide();
}
}
}
})
}
</script></span>
<!--end -->
如图为当前时间<试用申请开始时间，即将进入试用申请阶段，此时倒计时为距申请开始还有：xx天xx时xx分xx秒；试用申请开始时间<当前时间<试用申请结束时间时，倒计时为距申请结束还有：xx天xx时xx分xx秒；即将开始按钮变为立即申请；同理,试用申请结束时间<当前时间<报告提交截止时间，倒计时功能隐藏，立即申请按钮变为体验中
