如何制作数字计数器以计算 Wix Velo 中的多个元素答案

【问题标题】：How can I make number counter to count multiple elements in Wix Velo如何制作数字计数器以计算 Wix Velo 中的多个元素
【发布时间】：2022-11-03 04:45:48
【问题描述】：

我正在 Wix 上创建一个网站，它有 Velo，它的工作方式类似于 javascript（我对编码不太了解）

我试图做一个从 0 计数到给定数字的数字计数器，我做到了，但我需要 4 个不同的计数器，不知道该怎么做，也许有人可以帮忙。

所以我的代码看起来像这样

$w.onReady(function() {});

let startNum = 0;
let endNum = 145;
const duration = 20;

$w.onReady(function() {
  setInterval(() => {
    countUp();
  }, duration);
});


function countUp() {
  if (startNum <= endNum) {
    $w('#StartNumber').text = startNum.toString();
    startNum++;
  }
}

#startnumber 是一个从 0 到 145 的文本元素我想对另外 3 个元素 #startnumber2、3 和 4 做同样的事情。

this is what I'm trying to do

【问题讨论】：

标签： counter velo

【解决方案1】：

可以将计数逻辑提取到一个函数中，以便您可以为所有文本组件调用它。

$w.onReady(function () {
  count($w('#text1'), 0, 150, 1000);
  count($w('#text2'), 0, 250, 1000);
  count($w('#text3'), 0, 500, 1000);
  count($w('#text4'), 0, 1000, 1000);
});

function count(obj, start, end, duration) {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.text = `${Math.floor(progress * (end - start) + start)}`;
    if (progress < 1) {
      requestAnimationFrame(step);
    }
  };
  requestAnimationFrame(step);
}

演示：https://moshef9.wixsite.com/count-numbers

计数器函数取自：https://stackoverflow.com/a/60291224/863110

【讨论】：