一，倒計時設計

       以下是試用的倒計時範例，有三個時間點：試用申請開始時間，試用申請結束時間，試用報告提交截止時間，要根據這三個時間點進入不同的倒計時階段

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 -->