javascript - 同一页面上的多个值计数器

Question

我正在使用 Pqina 的 Flip 计数器，我需要在同一页面上创建 5 个具有不同值和间隔的值计数器。翻转文档没有提供解决方案如何做到这一点。如何在 html 上添加数据（日期、间隔、持续时间和值的数据）并仅使用一个函数？我尝试了很多在网上找到的技巧（GetAttribute、HTML 上的数据、每个函数等），但我对 JS 并不是很熟悉。我正在尝试使用这个：

<div class="tick" data-did-init="handleTickInit">

 <span data-layout="horizontal fit">

   <span data-repeat="true" data-transform="arrive(5, .01) -> round -> split -> delay(rtl, 100, 150)">

    <span data-view="flip"></span>

  </span>

 </span>
</div>



function handleTickInit(tick){
  // update the value every 5 seconds
  var interval = Tick.helper.duration(5, 'seconds');

  // value to add each interval
  var valuePerInterval = 1;

  // offset is a fixed date in the past
  var dateOffset = Tick.helper.date('2021-04-19');

  // value to start with, the value of the counter at the offset date
  var valueOffset = 17143;


  // start updating the counter each second
   Tick.helper.interval(function () {

  // current time in milliseconds
  var now = Date.now();

  // difference with offset time in milliseconds
  var diff = now - dateOffset;

  // total time since offset divide by interval gives us the amount of loops since offset
  var loops = diff / interval;

  // this will make sure we only count completed loops.
  loops = Math.floor(loops);

  // multiply that by the value per interval and you have your final value
  tick.value = valueOffset + (loops * valuePerInterval);

  }, 1000);
}

帮助 ！

标签： javascript