Счетчик запуска Javascript в поле зрения
Мне нужна ваша помощь, потому что я работаю над проектом несколько часов и не могу продвинуться дальше. На нашем сайте будет установлен «анимированный» счетчик. Это показывает, например, ежемесячную экономию затрат. Следующий код пока работает отлично.
<script>
/* <![CDATA[ */
var ersparnis = 4600;
var inv = setInterval(function() {
if (ersparnis < 4800)
document.getElementById("counter_ersparnis").innerHTML = ++ ersparnis;
else
clearInterval(inv);
}, 500 / 100);
/*]]>*/
</script>
<h2>
+ <span id = "counter_ersparnis"></span> €
</h2>
Но теперь я хочу, чтобы Javascript запускался только тогда, когда пользователь прокручивает до соответствующей точки. Я попытался сделать это с помощью кода jQuery из Интернета, но безуспешно!
<script>
/* <![CDATA[ */
jQuery.fn.isOnScreen = function()
{
var win = jQuery(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
jQuery(window).scroll(function()
{
if (jQuery('#element').isOnScreen())
{
var ersparnis = 4600;
var inv = setInterval(function() {
if (ersparnis < 4800)
document.getElementById("counter_ersparnis").innerHTML = ++ ersparnis;
else
clearInterval(inv);
}, 500 / 100);
/*]]>*/
</script>
<h2>
+ <span id = "counter_ersparnis"></span> €
</h2>
} }
Кстати, все это должно быть реализовано на сайте Jimdo, поэтому я также добавил базу данных со следующим кодом в области заголовка.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type = "text/javascript"></script>
Вы, наверное, уже слышали это, я плохо знаком с CSS / HTML и Javascript. Так что было бы здорово, если бы кто-нибудь мог предложить мне решение plug and play. Обычно я его переписываю, но не переделываю вместе (потому что я хочу, чтобы три таких счетчика были рядом друг с другом.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуйте это, я не большой сторонник jquery, поэтому его простой JavaScript.
const targetElement = document.querySelector('#element');
let isCounting = false;
var inv;
document.addEventListener('scroll', function(e) {
const bounding = targetElement.getBoundingClientRect();
if (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
) {
if (!isCounting ){
var ersparnis = 4600;
inv = setInterval(function() {
document.getElementById("counter_ersparnis").innerHTML = ++ ersparnis;
}, 500 / 100);
isCounting = true;
}
}else{
isCounting = false;
clearInterval(inv);
}
});
Чтобы сделать код немного чище и пригодным для повторного использования, вы можете сделать это.
const targetElement = document.querySelector('#element');
let isCounting = false;
let inv;
const isVisible = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
function startCounter(){
var ersparnis = 4600;
inv = setInterval(function() {
document.getElementById("counter_ersparnis").innerHTML = ++ ersparnis;
}, 500 / 100);
isCounting = true;
}
function stopCounter(){
clearInterval(inv);
isCounting = false;
}
document.addEventListener('scroll', function(e) {
const visible = isVisible( targetElement );
if ( visible && !isCounting ){
startCounter();
}else if ( !visible && isCounting ){
stopCounter();
}
});
Спасибо за быстрый ответ. Оба кода могут быть реализованы, но оба они не работают. Он просто показывает мне символ валюты вместо цифр. Как ни странно, два счетчика больше не работают, когда я вставляю этот скрипт, хотя все три определяются индивидуально. Так, например, counter_saving, counter_sparquote и counter_kosten.
Вы можете использовать API-интерфейс Intersection Observer, чтобы наблюдать изменения в пересечении целевого элемента с элементом-предком или с окном просмотра документа верхнего уровня:
let options = {
root: null, //--> viewport if it is null
rootMargin: '0px',
threshold: 1.0
}
const callback = function(entries, observer) {
entries.forEach(entry => {
let ersparnis = 4600;
const inv = setInterval(function() {
if (ersparnis < 4800)
entry.target.innerHTML = ++ersparnis;
else
clearInterval(inv);
}, 500 / 100);
});
};
let observer = new IntersectionObserver(callback, options);
const target = document.querySelector('#counter_ersparnis');
observer.observe(target);
Спасибо за ответ. К сожалению, мне это не удалось. Как мне изменить его, чтобы он также выводил текст в формате h2, как в моем предыдущем коде?
@ D.Fuchs1996 См. Этот рабочий пример, stackblitz.com/edit/js-tjzhkx?file=index.html, вы можете отключить наблюдателя, также вы можете проверить, не виден ли узел, чтобы остановить интервал .. и т. д.
Вы пытались заменить
#elementна настоящий идентификатор#counter_ersparnis?