Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
0 / 0 / 1
Регистрация: 06.12.2012
Сообщений: 14
1

Срабатывание Counter(a) при попадании в область видимости "экрана"

21.11.2014, 01:22. Показов 1680. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте ребятки. Есть к вам такая просьба! Я написал небольшой скрипт, который автоматически срабатывает и останавливается на определенном интервале. Необходимо сделать скрипт таким, чтобы он включался, только тогда когда попадает в область видимости экрана. Заранее спасибо!

Вот собственно JS код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var counterLabel = document.getElementById("counter");
        var startCounter = 0;
        var stopCounter = setInterval(setCounter, 20);
 
       function setCounter()
        {
           if (startCounter == 59) clearInterval(stopCounter);
            ++startCounter;
            counterLabel.innerHTML = pad(startCounter);
           
        }
      
        function pad(val)
        {
            var valString = val + "";
            return valString;
        }

HTML5
1
<label id="counter"></label>

CSS
1
2
3
4
5
6
#counter {
background: #777777;
font-size: 50px;
color:white;
font-family:Arial;
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.11.2014, 01:22
Ответы с готовыми решениями:

Срабатывание Counter(a) при попадании в область видимости "экрана"
Здравствуйте ребятки. Есть к вам такая просьба! Я написал небольшой скрипт, который автоматически...

Срабатывание макроса на попадания листа в область видимости
Доброе утро, уважаемые программисты. Помогите решить вопрос. В экселе есть макрос - реакции, на...

Клик по кнопке осуществлять не при попадании курсора в ее область, а в область картинки на ней
Делаю вместо кнопки картинку. Хочу чтобы когда курсор наводишь на кнопку , нажатие работало не...

Как активировать скрипт, при попадании блока в зону видимости?
Всем привет! Товарищи, подскажите, как активировать скрипт, при попадании блока в зону видимости. ...

4
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
21.11.2014, 02:25 2
Лучший ответ Сообщение было отмечено fr0st-mag3 как решение

Решение

fr0st-mag3, а вы уверены, что решение вам нужно на jQuery? Я ничего против не имею, но просто им и не пахнет в вашем коде. Даю вам пример на чистом JS, но если будет нужно, то можно будет переписать на jQuery.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var d = document,
    counterLabel = d.getElementById("counter"),
    scrollTop = getScrollTop(),
    posTop = counterLabel.offsetTop,
    counerH = counterLabel.offsetHeight,
    winH = window.innerHeight,
    counting = false;
 
if(scrollTop + winH - counerH >  posTop && scrollTop < posTop + counerH) setCounter();
 
d.addEventListener('scroll', function(){
    if(counting) return false;
    var currentScroll = getScrollTop();
    currentScroll + winH - counerH >  posTop 
    && currentScroll < posTop + counerH 
    && setCounter();
}, false);
 
function setCounter() {
    counting = true;
    var startCounter = 0,
        stopCounter = setInterval(function(){
            ++startCounter;
            counterLabel.innerHTML = startCounter;
            if (startCounter >= 60) clearInterval(stopCounter);
        }, 20);
    return false;
}
 
function getScrollTop(){
    return window.pageYOffset || d.documentElement.scrollTop;
}
1
0 / 0 / 1
Регистрация: 06.12.2012
Сообщений: 14
21.11.2014, 12:16  [ТС] 3
Благодарю за помощь. Изучу оба варианта, все равно пригодиться.
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
21.11.2014, 12:41 4
Цитата Сообщение от fr0st-mag3 Посмотреть сообщение
Изучу оба варианта
Хм... Я вроде бы только один вариант показал... ))
0
0 / 0 / 1
Регистрация: 06.12.2012
Сообщений: 14
21.11.2014, 17:42  [ТС] 5
Ой=) Я просто перешел сразу по ссылке и посмотрел там JS и подумал, что код, который тут реализован с помощью JQuery. Видимо еще не проснулся =)
0
21.11.2014, 17:42
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.11.2014, 17:42
Помогаю со студенческими работами здесь

ActionScript переход к кадру N при попадании MovieClip в заданную область
Добрый день! Есть MovieClip. Задача: переход к кадру N при попадании этого объекта MovieClip в...

Появляется горизонтальная линия при попадании курсора в нарисованную область
1)Вот я нарисовал на форме какой нибудь рисунок, почему если навести на этот рисунок курсор мыши то...

Создать условие, которое срабатывает при попадании в область типа треугольник
Здравствуйте! есть такая задача : есть пушка, есть гора, есть цель. нужно чтобы снаряд из пушки...

Закрасить форму случайными пикселями, меняя цвет при попадании в область фигуры
закрасить форму случайными пикселями, меняя цвет при попадании в область фигуры.

Закрасить форму случайными пикселями, меняя цвет при попадании в область фигуры
Закрасить форму случайными пикселями, меняя цвет при попадании в область фигуры. P.s: фигура в...

Закрасить форму случайными пикселями, меняя цвет при попадании в область фигуры
Закрасить форму случайными пикселями, меняя цвет при попадании в область фигуры. Желательно...

Записать условие, которое является истинным при попадании точки в заштрихованную область
Записать условие, которое является истинным, когда точка с координатами (х, у) попадает в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru