Как создать счетчик?

Question

[newsworker90]

Как сделать вот такие 3 счетчика:

что бы при скроле на этот блок они начинали считать, и за пару секунд отображали готовый результат?

<div class="container">
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 our_pride-content">
				<div class="counter-number">
					<p>
						<p class="count-text"></p>
					</p>
				</div>
				<p>ПРАЦЕВЛАШТОВАНІ ЗА ВЕСЬ ПЕРІОД РОБОТИ КОМПАНІЇ</p>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 our_pride-content">
				<div class="counter-number">
					<p>
						<p class="count-text"></p>
					</p>
				</div>
				<p>ПРАЦЕВЛАШТОВАНІ ЗА 2018 РІК</p>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 our_pride-content">
				<div class="counter-number">
					<p>
						<p class="count-text"></p>
					</p>
				</div>
				<p>ПРАЦЕВЛАШТОВАНІ В ЦЬОМУ МІСЯЦІ</p>
			</div>
			<script>
				var p = document.querySelectorAll('.count-text');

				timer(p[0], 20344, 1);
				timer(p[1], 10283, 1);
				timer(p[2], 115, 200);

				function timer(elem, limit, tick) {
				  limit = limit || 1000;
				  tick = tick || 1000;

				  var i = 0;
				  var int = setInterval(function() {
					elem.innerText = i++;
					if (i == limit) {
					  clearInterval(int);
					}
				  }, tick);
				}
			</script>
		</div>
	</div>

Comments

[0xD34F]

Да, задача непростая, с наскока не решить. А главное - уникальная, никто такое раньше не делал, гуглить бесполезно. Правильно сделали, что обратились сюда за помощью.

[Андрей Иванов]

Или вкратце я бы так сделал:

• Написал бы функцию-счётчик которая принимает конечное число до которого нужно считать.
  
• Написал бы функцию которая сумеет понять что до нужной секции с счётчиками мы проскролили и запустить функцию счётчик.
  

[newsworker90]

0xD34F, не можете помочь, не пишите

[RAX7]

https://inorganik.github.io/countUp.js/
https://github.hubspot.com/odometer/docs/welcome/

[0xD34F]

newsworker90, почему же не могу? Могу. Просто лень лентяям помогать.

[newsworker90]

0xD34F, Бла бла бла, один треп, походу не хватает внимания

[0xD34F]

newsworker90, кстати, а вы понимаете, что нарушаете своим вопросом правила? Там ясно написано, что

2. Перед тем как задать вопрос пользователь Сервиса обязан:

<...>

2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.

[Rustam Bainazarov]

newsworker90, ваш вопрос настолько стандартен, что даже нет смысла говорить о нём. Примеров миллионов.

[newsworker90]

0xD34F, никак не уймешься, пойди пожалуйся, мне все равно, делай что хочешь, ответ я уже получил, спасибо Анита Ковалева.

[Анита Ковалева]

newsworker90, Не за что) не обижайтесь на людей, уважаемый newsworker90 , дело в том, что большинство вопросов которые здесь задают решаются банальным вопросом в google. А так как работа "программиста" это гугление и самообучение, оттуда и негатив к людям вроде вас. По факту - обычно сперва я 10 минут гуглю, и если после 10 минут у меня ступор, я иду на тостер, но не наоборот.

[0xD34F]

newsworker90, ну так как, вы правила нарушаете потому что лентяй (не стали гуглить), или потому что дурак (гуглили, но безрезультатно)?

[newsworker90]

0xD34F, Ну раз Вы решили перейти на оскорбления, то я пожалуй опущусь на Ваш уровень, свое мнение и нравоучения засуньте себе в одно место, и займитесь чем нибудь полезным

[newsworker90]

Анита Ковалева, Нервный я потому что вот такие особы выводят

[0xD34F]

newsworker90, какие оскорбления, где? "Дурак"? Но ведь это было высказано в форме предположения - неужели вы этого не заметили? Русский язык не родной? Да и основания для подобного предположения есть - ваша проблема легко гуглиться за три секунды и надо быть умственным инвалидом, чтобы не суметь этого сделать. Так что вы или сволочь (ленитесь соблюдать правила) или дурак (не хватило мозгов нагуглить необходимое). Логично? Логично. Что, не согласны? Можете предложить иные объяснения своему поведению? Ну, давайте.

Answer 1

[Анита Ковалева]

Вот пример счетчика, в целом разобраться будет не сложно.