javascript - 当页面位于 Y 位置时开始计数

Question

我的计数器有问题。 我想要这样的页面: https://www.phishlabs.com/

我有我的功能:

function count(id, start, end, duration) {
    var obj = document.getElementById(id);
    var range = end - start;
    var minTimer = 50;
    var stepTime = Math.abs(Math.floor(duration / range));
    stepTime = Math.max(stepTime, minTimer);
    var startTime = new Date().getTime();
    var endTime = startTime + duration;
    var timer;
    function run() {
        var now = new Date().getTime();
        var remaining = Math.max((endTime - now) / duration, 0);
        var spanclass = Math.round(end - (remaining * range));
        obj.innerHTML = spanclass;
        if (spanclass == end) {
            clearInterval(timer);
        }
    }

    timer = setInterval(run, stepTime);
    run();
}
count("spanclass", 1, 648, 2000);

此脚本在页面加载时开始计数，例如，当页面位于 "y" 位置或 "bottom" 位置时，我需要启动此函数。

Answer 1

i need to start this function when page was on "y" position

然后您需要在 scroll 事件上调用函数处理程序，

document.addEventListener('scroll', function(){
  // inside this handler check if it reached y and eventually call your function
   if (window.scrollY > 444)
     yourFunction()
})

<小时/>

这是一个例子:

function count(id, start, end, duration) {
    var obj = document.getElementById(id);
    var range = end - start;
    var minTimer = 50;
    var stepTime = Math.abs(Math.floor(duration / range));
    stepTime = Math.max(stepTime, minTimer);
    var startTime = new Date().getTime();
    var endTime = startTime + duration;
    var timer;
    function run() {
        var now = new Date().getTime();
        var remaining = Math.max((endTime - now) / duration, 0);
        var spanclass = Math.round(end - (remaining * range));
        obj.innerHTML = spanclass;
        if (spanclass == end) {
            clearInterval(timer);
        }
    }

    timer = setInterval(run, stepTime);
    run();
}

document.addEventListener('scroll', handler)

function handler(){
  if(window.scrollY < 900)
	return
  count("spanclass", 1, 648, 2000)
  document.removeEventListener('scroll', handler)
}

body{
  height:2000px
}
span{
  display:block;
  margin-top:1000px
}

<span id='spanclass'>hei</span>

我创建了一个命名处理程序，以便能够在触发后将其删除(您只需要一次)，在 handler 内，您将看到对 removeEventListener() 的调用，希望这有帮助...