Question

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

<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属性工作（即使添加了超过1000px的内容），但这应该给你一个整体的想法。我也清除间隔，这样一旦计数器达到1500，它就会停止。

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

在3秒内计算1到1500 jQuery isInViewport

1 个答案: