Как запустить счетчик JavaScript с расчетами, когда мой текст находится в области просмотра? - PullRequest
Новая
       25

Как запустить счетчик JavaScript с расчетами, когда мой текст находится в области просмотра?

0 голосов
/ 26 июня 2018

У меня есть страница со счетчиком, который добавляет 8 к количеству каждый день, в дополнение к этому мне нужно сделать обратный отсчет с нуля. Я решил их, но проблема в том, что счетчик запускается при загрузке страницы, а не когда текст находится в области просмотра. Как я могу решить это? Я нашел некоторые функции, но я не могу их реализовать :( Это мой код, который находится внутри блока html: 

<!DOCTYPE html>
<html>
<body>

<p class="Count" id="uno"></p>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> . 
</script>

<script>
var startDate1 = new Date(1522645200000)
var today1 = new Date();
var diff1 = Math.floor((today1 - startDate1)/(86400000))
var answer1 = 5600 + diff1 * 8

document.getElementById("uno").innerHTML = answer1;


$('.Count').each(function () {
 var $this = $(this);
 jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
   duration: 1000,
   easing: 'swing',
   step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});


</script>

</body>
</html>

Здесь находится JS Bin , где вы можете увидеть исполняемый код.

1 Ответ

0 голосов
/ 26 июня 2018

здесь идет код, чтобы проверить, есть ли заголовок в ViewPort 

window.addEventListener('scroll', function () {
   var inViewPortBol = inViewPort();
   //if true means, you element invieport, the call you counterAnimation
});
function inViewPort() {
        var arentLocal = yourTitleElement.getBoundingClientRect();
        return parentLocal.bottom > 0 &&
            parentLocal.right > 0 &&
            parentLocal.left < (window.innerWidth || document.documentElement.clientWidth) &&
            parentLocal.top < (window.innerHeight || document.documentElement.clientHeight);
}

дай мне знать, помогло ли это. Спасибо!

...