Question

我有问题在页面上放几个倒计时。我使用HTML.Partial：

godz. min. s.

我也有：

<script type="text/javascript">

    $(document).ready(startTime);
    var datefrom = new Date();
    var dateto = new Date(@Model.EndDate.Year, @Model.EndDate.Month-1, @Model.EndDate.Day, @Model.EndDate.Hour, @Model.EndDate.Minute, @Model.EndDate.Second);
    var diff  = dateto.getTime() - datefrom.getTime(); </script>

我的倒计时功能如下：

function startTime(){
diff = diff - 500;

if (diff <= 0)
{
    $("#time_on").hide();
    $("#time_off").show();
} else {


    $("#time_h").html(h);
    $("#time_m").html(checkTime(m));
    $("#time_s").html(checkTime(s));
}

t = setTimeout('startTime()',500);}

  function checkTime(i){
if (i<10)
  {
  i="0" + i;
  }
return i;}

然后我把Partial放在foreach循环中。如果集合中只有一行，一切都会好起来的。如果超过1，则只有第一次倒数计数。当我在span（time_h等）中使用class而不是id时，它会在每个项目上显示相同的时间。这是好方法吗？我应该改变什么？

由于卡米尔

Answer 1

您必须将选择器从#id更改为.class。

当你在foreach循环中渲染部分控件时，为每个控件渲染相同的id，当你试图通过#id获取dom对象时，唯一的最后一个项受到影响。

希望得到这个帮助。

Answer 2

我尝试使用这个： Jquery multi-countdown .each() function

My Partial View看起来：

<div class="" id="2345423234">
   <span class="remain"></span>
</div>  
<div class="" id="345454234">
   <span class="remain"></span>
</div>

我的倒计时功能：

 $(document).ready(function(){  
      $('div[id]').each(function () {
         var $this = $(this);
         var diff =  parseInt($this.attr("id"));
         var curDate = (new Date()).getMilliseconds();
         countdown = setInterval(function(){
          diff--;
            var   h = Math.floor(diff / 3600000);
            var    m = Math.floor((diff - (h * 3600000)) / 60000);
             var   s = Math.floor((diff - (h * 3600000) - (m * 60000)) / 1000);
             var goodDate =   h + ":" + m + ":" + s;

             $('.remain', $this).html(goodDate);     

         }, 1000);
      });  
    });

但没有任何反应......它显示出良好的日期时间但不倒计时。当我把

 $('.remain', $this).html(diff);

倒计时工作正常......

Answer 3

确定。我有它。这是因为从int到date的转换时间很长。我现在做diff = diff - 1000并且显示正确。

ASP.MVC 3和HTML.Partial和多个Jquery倒计时

3 个答案: