javascript - 如何解决计数器的追加值？

Question

我有一个计数器 javascript:

function animateSun() {
  var $elie = $("#sun");
  $({
    degree: 0
  }).animate({
    degree: 360
  }, {
    duration: 190999,
    easing: 'linear',
    step: function(val) {
      now = Math.round(val);
      if ((now == 5) || (now == 10) || (now == 15)) //increament the value on every 5 value
      {
        var i = 0;
        $('#tam').text(i += 1);
      }
      $elie.css({
        transform: 'rotate(' + now + 'deg)'
      });
      $('#demo').text('sec:' + now);
    },


  });
}
animateSun();

#sun {
  position: absolute;
  width: 55px;
  height: 55px;
  border: 1px solid red;
  background-color: orange;
  opacity: 0.9;
  border-radius: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  animation: round 3s infinite linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="demo"></p>
<p id="tam">0</p>
<p id="sun">sun</p>

计时器正在运行。在时间值达到 5 时在 #tam 上添加 1 然后下一次达到 10 #tam 添加 1 更改 2 的值。但它不起作用。请帮我。如何在 #demo 上每 5 个值更改时增加 #tam 的值。提前致谢。

Answer 1

您可以尝试以下操作。将 Math.floor() 应用于 step/5。

function animateSun() {
  var $elie = $("#sun");
  $({
    degree: 0
  }).animate({
    degree: 360
  }, {
    duration: 190999,
    easing: 'linear',
    step: function(val) {
      now = Math.round(val);
      $('#tam').text(Math.floor(val/5));
      $elie.css({
        transform: 'rotate(' + now + 'deg)'
      });
      $('#demo').text('sec:' + now);
    },


  });
}
animateSun();

#sun {
  position: absolute;
  width: 55px;
  height: 55px;
  border: 1px solid red;
  background-color: orange;
  opacity: 0.9;
  border-radius: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  animation: round 3s infinite linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id="demo"></p>
<p id="tam">0</p>
<p id="sun">sun</p>