javaScript：倒计时设计

       做为后台开发人员，往往对前端技术了解甚少，开发过程中遇到比较棘手的前端问题经常会捉襟见肘，但勤能补拙，希望通过一点一滴的积累能让个人的前端水平有所提升吧

一，倒计时设计

       以下是试用的倒计时范例，有三个时间点：试用申请开始时间，试用申请结束时间，试用报告提交截止时间，要根据这三个时间点进入不同的倒计时阶段

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秒；即将开始按钮变为立即申请；同理,试用申请结束时间<当前时间<报告提交截止时间，倒计时功能隐藏，立即申请按钮变为体验中