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

我需要在页面打开时启动此功能＆＃34; y＆＃34;位置

然后你需要在scroll事件

上调用函数处理程序

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

这是一个例子：

＆＃13;

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)
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

如果您想在页面处于Y位置时执行您的功能，您可以尝试在页面位于Y位置时执行该功能，如下所示：

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);
if (scrollY >= 500){
      run();
  }
}
count("spanclass", 1, 648, 2000);

页面处于Y位置时开始计数

2 个答案: