html 当一个特定的div进入视图时如何启动计数器

pkbketx9  于 2023-01-24  发布在  其他
关注(0)|答案(1)|浏览(113)

我有一个plugins.init.js文件,其中的try catch在页面加载时运行。我希望在计数器值div出现时运行它。有没有办法在div出现时只运行一次

try {
  const counter = document.querySelectorAll(".counter-value");
  const speed = 2500; // The lower the slower

  counter.forEach((counter_value) => {
    const updateCount = () => {
      const target = +counter_value.getAttribute("data-target");
      const count = +counter_value.innerText;

      // Lower inc to slow and higher to slow
      var inc = target / speed;

      if (inc < 1) {
        inc = 1;
      }

      // Check if target is reached
      if (count < target) {
        // Add inc to count and output in counter_value
        counter_value.innerText = (count + inc).toFixed(0);
        // Call function every ms
        setTimeout(updateCount, 1);
      } else {
        counter_value.innerText = target;
      }
    };

    updateCount();
  });
} catch (err) {}
uubf1zoe

uubf1zoe1#

您可以使用浏览器中的交集观察器API来完成此操作。
观察器将等待指定的元素进入视图,然后在出现这种情况时执行SOM回调。
你可以阅读here
祝你好运!

相关问题