在 3 秒内从 1 数到 1500 jQuery isInViewport

Question

我制作了这个在 3 秒内从 1 数到 1500 的脚本。这很好用。但是这个 div 显示在网站的底部，我希望它只在视口中计算。我下载了 isInViewport jQuery 插件，并尝试将这两个脚本合并在一起。但它不起作用。可以请任何人帮助我吗？

<script type="text/javascript">
            var time = setInterval(function(){TimeNumber();},2);
            var iState = 1;
            var ifSeen = 0;

            function TimeNumber()
            {
              document.getElementById("time").innerHTML = iState;

              if (ifSeen==1) {
                iState++;
              }

              if (iState > 1500) {
                iState = 1500;
              }
            }

            jQuery(document).ready(function ($) {
                "use strict";

                /* activate pause for lightbulb video if scrolled out of viewport */
                $(window).scroll(function() {
                $('time').each(function(){
                    if ($(this).is(":in-viewport( 1000 )")) {
                        ifSeen=1;
                    } else {
                        ifSeen=0;
                    }
                    });
                });
            });
        </script>

Answer 1

我已对您的代码进行了一些更改，希望能使其更清晰一些。

jQuery(document).ready(function ($) {
  "use strict";
  var intervalId = setInterval(function(){TimeNumber();},2);
  var iState = 1;
  var ifSeen = false;
  var $timeElem = $("#time");
  function TimeNumber()
  {
    $timeElem.text(iState);
    if (ifSeen) {
      iState++;
    }

    if (iState > 1500) {
      iState = 1500;
      clearInterval(intervalId);
    }
  }

  /* activate pause for lightbulb video if scrolled out of viewport */
  $(window).scroll(function() {
    ifSeen = $timeElem.is(":in-viewport()");
  });
});

我将所有内容都放在 ready 函数中，以便您可以访问您的元素。我创建了一个变量 $timeElem 来保存您的元素，因为您将多次访问它。我把ifSeen变成了布尔值，直接用.is("in-viewport()")设置。我无法使 tolerance 属性起作用（即使在添加了超过 1000 像素的内容之后），但这应该会给您一个整体的想法。我还清除了间隔，这样一旦计数器达到1500，它就会停止。

JSFiddle: https://jsfiddle.net/m95833e5/

在 3 秒内从 1 数到 1500 jQuery isInViewport

Counts from 1 to 1500 in 3 seconds jQuery isInViewport

jquery

viewport