具有固定小数位数的 JavaScript 动画计数器

Question

我下载了一个 jQuery 动画数字计数器。它通常从0 计数到无穷大，但现在我想从0.0000 计数到无穷大。但是，我发现当它到达0.01223 时，它会延伸到0.12239999999999 并不断增加。

我希望将其固定为 0.0000。就是这样。

$('#counter-block').ready(function() {
  $('.fb').animationCounter({
    start: 0,
    step: 1,
    delay: 100
  });
  $('.bike').animationCounter({
    start: 0.0100,
    step: 0.00005,
    delay: 2200,
    txt: ' BTC'
  });
  $('.code').animationCounter({
    start: 0,
    end: 570,
    step: 4,
    delay: 1000
  });
  $('.coffee').animationCounter({
    start: 490,
    end: 1560,
    step: 20,
    delay: 900,
    txt: ' cl'
  });
});

(function($) {
  $.fn.animationCounter = function(options) {
    return this.each(function() {
      try {
        var element = $(this);
        var defaults = {
          start: 0,
          end: null,
          step: 1,
          delay: 1000,
          txt: ""
        }
        var settings = $.extend(defaults, options || {})
        var nb_start = settings.start;
        var nb_end = settings.end;
        element.text(nb_start + settings.txt);
        var counter = function() {
          // Definition of conditions of arrest
          if (nb_end != null && nb_start >= nb_end) {
            return;
          }
          // incrementation
          nb_start = nb_start + settings.step;
          // display
          element.text(nb_start + settings.txt);
        }
        // Timer
        // Launches every "settings.delay"
        setInterval(counter, settings.delay);
      } catch (e) {
        alert(e + ' at line ' + e.lineNumber);
      }
    });
  };
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <div class="intro">
    <h1 class="title-plugin">animationCounter.js</h1>
  </div>
  <div class="block-wrapper">
    <div class="block">
      <p><span class="lnr lnr-heart"></span></p>
      <p class="counter-wrapper"><span class="fb"></span></p>
      <p class="text-block">like</p>
    </div>
    <div class="block">
      <p><span class="lnr lnr-code"></span></p>
      <p class="counter-wrapper"><span class="code"></span></p>
      <p class="text-block">code</p>
    </div>
    <div class="block">
      <p><span class="lnr lnr-bicycle"></span></p>
      <p class="counter-wrapper"><span class="bike"></span></p>
      <p class="text-block">bicycle</p>
    </div>
    <div class="block">
      <p><span class="lnr lnr-history"></span></p>
      <p class="counter-wrapper"><span class="coffee"></span></p>
      <p class="text-block">coffee</p>
    </div>
  </div>
  <footer>
    <p>Copyright (c) 2017 <a href="http://www.pixel-renaissance.com">Micheline Pavadé</a></p>
  </footer>
</div>

如果我刷新页面，数字将从0 重新开始。即使用户关闭页面，有没有办法让它继续计数？

Answer 1

诀窍是 toFixed()，您可以使用它来确保它只使用四位小数。这是在写入页面时使用nb_start.toFixed(4) 完成的。

请注意，如果数字大于 1，您可能不想要使用 toFixed()，因此我在以下示例中将其包装在 if/else 条件中：

$('#counter-block').ready(function() {
  $('.fb').animationCounter({
    start: 0,
    step: 1,
    delay: 100
  });
  $('.bike').animationCounter({
    start: 0.0100,
    step: 0.00005,
    delay: 2200,
    txt: ' BTC'
  });
  $('.code').animationCounter({
    start: 0,
    end: 570,
    step: 4,
    delay: 1000
  });
  $('.coffee').animationCounter({
    start: 490,
    end: 1560,
    step: 20,
    delay: 900,
    txt: ' cl'
  });
});

(function($) {
  $.fn.animationCounter = function(options) {
    return this.each(function() {
      try {
        var element = $(this);
        var defaults = {
          start: 0,
          end: null,
          step: 1,
          delay: 1000,
          txt: ""
        }
        var settings = $.extend(defaults, options || {})
        var nb_start = settings.start;
        var nb_end = settings.end;
        element.text(nb_start + settings.txt);
        var counter = function() {
          // Definition of conditions of arrest
          if (nb_end != null && nb_start >= nb_end) {
            return;
          }
          // incrementation
          nb_start = nb_start + settings.step;
          // display
          if (nb_start < 1) {
            element.text(nb_start.toFixed(4) + settings.txt);
          }
          else {
            element.text(nb_start + settings.txt);
          }
        }
        // Timer
        // Launches every "settings.delay"
        setInterval(counter, settings.delay);
      } catch (e) {
        alert(e + ' at line ' + e.lineNumber);
      }
    });
  };
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <div class="intro">
    <h1 class="title-plugin">animationCounter.js</h1>
  </div>
  <div class="block-wrapper">
    <div class="block">
      <p><span class="lnr lnr-heart"></span></p>
      <p class="counter-wrapper"><span class="fb"></span></p>
      <p class="text-block">like</p>
    </div>
    <div class="block">
      <p><span class="lnr lnr-code"></span></p>
      <p class="counter-wrapper"><span class="code"></span></p>
      <p class="text-block">code</p>
    </div>
    <div class="block">
      <p><span class="lnr lnr-bicycle"></span></p>
      <p class="counter-wrapper"><span class="bike"></span></p>
      <p class="text-block">bicycle</p>
    </div>
    <div class="block">
      <p><span class="lnr lnr-history"></span></p>
      <p class="counter-wrapper"><span class="coffee"></span></p>
      <p class="text-block">coffee</p>
    </div>
  </div>
  <footer>
    <p>Copyright (c) 2017 <a href="http://www.pixel-renaissance.com">Micheline Pavadé</a></p>
  </footer>
</div>

要存储该值以便用户不必刷新页面，您正在寻找 cookies，或者最好是 localStorage。使用localStorage.setItem('variable', 'value');将变量存储在所需的位置，然后当用户再次访问页面时将变量设置为存储在localStorage中的值：var stored_value = localStorage.getItem('variable');。

希望这会有所帮助！ :)