Question

我想为每个段落运行一个不同的计时器。但不幸的是，它按照最后一段的规定运作。该函数应该为每个段落分别运行。这是我的代码

$(".set_timer").each(function() {
  setTimer($(this).data("created_time"), $(this));
});

function setTimer(dateStart, ele) {
  countDownDate = new Date(dateStart).getTime();

  x = setInterval(function() {
    // Get todays date and time
    now = new Date().getTime();
    // Find the distance between now an the count down date
    distance = countDownDate - now;
    // Time calculations for days, hours, minutes and seconds
    days = Math.floor(distance / (1000 * 60 * 60 * 24));
    hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    ele.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
    // If the count down is over, write some text 
    if (distance < 0) {
      clearInterval(x);
      ele.html("TIMER COMPLETED");
    }
  }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p class="set_timer" data-created_time="May 12, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="May 10, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="May 08, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="Apr 10, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="Jun 15, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="Jul 13, 2018 11:56:30"></p>

当前输出：

459d 1h 15m 25s

根据created_time data属性

，它应该有所不同

Answer 1

预期所有变量都在全球范围内定义。然后在本地范围内定义。

＆＃13;

$(".set_timer").each(function() {
  setTimer($(this).data("created_time"), $(this));
});

function setTimer(dateStart, ele) {
  let countDownDate = new Date(dateStart).getTime();
  let x = setInterval(function() {
    // Get todays date and time
    let now = new Date().getTime();
    // Find the distance between now an the count down date
    let distance = countDownDate - now;
    // Time calculations for days, hours, minutes and seconds
    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    ele.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
    // If the count down is over, write some text 
    if (distance < 0) {
      clearInterval(x);
      ele.html("TIMER COMPLETED");
    }
  }, 1000);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<p class="set_timer" data-created_time="May 12, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="May 10, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="May 08, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="Apr 10, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="Jun 15, 2018 11:56:30"></p>
<p class="set_timer" data-created_time="Jul 13, 2018 11:56:30"></p>

＆＃13;

Answer 2

只需将var添加到countDownDate = new Date(dateStart).getTime();

即可

所以它将是

 var countDownDate = new Date(dateStart).getTime();
 .
 .
 .

Answer 3

MyViewController

不同段落的Js setInterval不起作用

3 个答案: