2014-07-04 2 views
0

내 시나리오는 이렇습니다. 리피터가 있고 항목 템플릿에 스팬 (라벨)이 있습니다. 데이터베이스에서 날짜를 얻고 고객에게 카운트 다운처럼 보여주고 싶습니다.리피터에서 라벨을 카운트 다운으로 사용하는 방법

나는 이렇게 작성하려고합니다.

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    var _second = 1000; 
     var _minute = _second * 60; 
     var _hour = _minute * 60; 
     var _day = _hour * 24; 
     var timer; 

     $("#carCampaign span").each(function (index, value) { 
      //alert(index); 
      var data = $(this).attr('data'); 

      if (data == 'timer') { 

       var end = $(this).attr('end'); 
       var date = new Date(end); 

       function showRemaining() { 
        var now = new Date(); 
        var distance = date - now; 

        if (distance < 0) { 

         clearInterval(timer); 
         document.getElementById('#Label3' + i).innerHTML = 'EXPIRED!'; 

         return; 
        } 
        var hours = Math.floor((distance % _day)/_hour); 
        var minutes = Math.floor((distance % _hour)/_minute); 
        var seconds = Math.floor((distance % _minute)/_second); 

        document.getElementById('Label3').innerHTML = hours + 'hrs '; 
        document.getElementById('Label3').innerHTML += minutes + 'mins '; 
        document.getElementById('Label3').innerHTML += seconds + 'secs'; 
        $(this).innerHTML = hours; 


       } 

       timer = setInterval(showRemaining, 1000); 
      } 
     }); 

    }); 
</script> 

는 그리고 이것은 내 .HTML

<div id="carCampaign"> 
      <asp:Repeater runat="server" ID="rptOpportunities" OnItemDataBound="rptOpportunities_ItemDataBound" OnItemCommand="rptOpportunities_ItemCommand"> 
       <ItemTemplate>       
          <div class="panel-body"> 
           <a href="#anyword"> 
            <div class="row"> 
             <div class="col-md-4 search-img"> 
              <asp:Image ID="imageCar" itemprop="image" CssClass="img-responsive" runat="server" /> 
              <div class="row weight-700"><span class="fa fa-clock-o" style="padding-removed 15px;"></span> </div> 
              <div class="row"> 
               <div class="coming-soon-plugin" style="font-size: 2.2em; padding-removed 15px; margin-removed -35px;"> 
                <asp:Label ID="Label3" runat="server" ClientIDMode="Static" CssClass="timer" Text='<%#Eval("DueDateTime") %>' data="timer" end='<%#Eval("DueDateTime") %>'> 
                </asp:Label> 
                <asp:Label ID="Label1" runat="server"></asp:Label> 
                <br /> 
                <asp:Label ID="Label2" runat="server" /> 
               </div> 
              </div> 
             </div> 
       </ItemTemplate> 
      </asp:Repeater> 
       </div> 

이다 그러나 그 시간은 첫번째 스팬 또 다른 작동하지 않습니다 coundown로 변환. 저는 매번 카운트 다운이 첫 번째 기간을 시작하려고한다고 가정합니다. 어떤 제안있어?

+0

정적 ClientIDMode와 함께 ID Label3을 사용해서는 안됩니다. ID가 고유해야하기 때문에 고정 ID가 아닌 사용자 지정 ID를 사용하여 리터럴을 사용하여 사용자 지정 ID로 생성 할 수 있습니다. – Kyojimaru

+0

오키 나는 대답을하지 않고 idmode를 사용해 보았습니다. – Objectx

답변

0

내가 아는 경우 리피터 제어에서 데이터베이스에서 검색 한 모든 날짜에 대한 카운트 다운 타이머를 만들고 싶습니다.

사실이라면 아래에서 jQuery 플러그인에 대한 도움말을 얻을 수 있습니다.

jQuery Countdown

25+ Best Free jQuery Countdown Timer Scripts and Plugins

는 희망이 도움이!

+0

귀하의 권리는 있지만 실종되었습니다. 내 페이지에서 일부 플러그인을 사용하지만 여러 카운트 다운을 사용하려고합니까? – Objectx

관련 문제