时间戳

首页 > 解决方案 > JS 新手，计数完成后试图阻止我的 div 计数

javascript - JS 新手，计数完成后试图阻止我的 div 计数

问题描述

基本上我是 JS 的初学者，我试图让这个 div 在 div 滚动到视图中时开始计数，并在它完成计数后停止计数。我设法让它短暂地工作，但每次我滚动它都会重新开始计数。

非常感谢任何帮助，谢谢。

let stats = document.getElementById('.container-stats');

stats.addEventListener("scroll", () => {
 function counter(id, start, end, duration) {
  let obj = document.getElementById(id),
   current = start,
   range = end - start,
   increment = end > start ? 1 : -1,
   step = Math.abs(Math.floor(duration / range)),
   timer = setInterval(() => {
    current += increment;
    obj.textContent = current;
    if (current == end) {
     clearInterval(timer);
    }
   }, step);
 }
 counter("count1", 0, 6, 3000);
 counter("count2", 100, 40, 3000);
 counter("count3", 499000, 500000, 3000);
 counter("count4", 0, 10, 3000);
 counter("count5", 0, 12, 3000);
 counter("count6", 0, 10, 3000);
});

标签： javascriptscrollcounter

解决方案

let stats = document.getElementById('container-stats');
let current = 0;

stats.addEventListener("scroll", () => {
 function counter(id, start, end, duration) {
  if(current !== undefined) {
  let obj = document.getElementById(id),
   current = start,
   range = end - start,
   increment = end > start ? 1 : -1,
   step = Math.abs(Math.floor(duration / range)),
   timer = setInterval(() => {
    current += increment;
    obj.textContent = current;
    if (current == end) {
     clearInterval(timer);
    }
   }, step);
  }
 }
 counter("count1", 0, 6, 3000);
 counter("count2", 100, 40, 3000);
 counter("count3", 499000, 500000, 3000);
 counter("count4", 0, 10, 3000);
 counter("count5", 0, 12, 3000);
 counter("count6", 0, 10, 3000);

 current = undefined;
});

如果我猜对了，您要求滚动一次会话并计数对吗？给你

推荐阅读