Всем привет!
Ломал голову над тем, как назвать заголовок, голову сломал, но так и не смог дать правильное название. Попробую объяснить принцип действия скрипта.
Вот, например, у вас есть сайт, где вы указываете в шапке количество подписчиков, покупателей или сколько тон перевезли товаров и т.д. Так вот, когда посетитель перейдет на сайт, он обратит внимание на эти цифровые указатели, так как цифры анимировано будут меняться до указанного цифрового значения. Если указать число «1000», то при обновлении страницы, цифры начнут быстренько поочерёдно меняться от «0» до «1000».
Честно, я пытался объяснить, но сам вижу, что нужно для понимания показать демонстрацию:
Вот, теперь всем стало ясно, что я здесь пытаюсь уже 5 минут объяснить.
Итак, чтобы сделать такой эффект на сайте, между тегами <head></head> вставьте вот такой JS скрипт:
<script>
function scroll(val,el,timeout,step){
var i=0;
(function(){
if(i<=val){
setTimeout(arguments.callee,timeout);
document.getElementById(el).innerHTML=i;
i=i+step;
}else{
document.getElementById(el).innerHTML=val;
}
})();
}
scroll(60203,'shethik-cifra',10,60);
</script>
Настройки:
Строка №15 -
60203 – это конечная цифра
10 – скорость смены цифр
60 – шаг смены цифры. Отсчет будет вот такой (1, 60, 120...60203). Если указать «1», то отсчет будет вот такой (1,2,3,4…60203).
Теперь между тегами <body></body> вставьте вот такой код:
Нам доверяют:<div class="shethik-cifra" id="shethik-cifra"></div>
Вот такой чудо-скрипт! Как правильно его назвать, не знаю.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Формы поиска для сайтов
Как изменить форму курсора мыши на сайте с помощью CSS
Что делать? Мой сайт попал в Роскомнадзор!
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222435 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187485 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559
15 Ответов на комментарий - Смена цифр на JavaScript
Добавить комментарий
Метки: javascript, Вебмастеру, для сайта, эффекты для сайта
Думаю, Тут еще надо в скрипт дописать функцию зависимости скорости смены цифр в зависимости от тотальной суммы. Скажем, чтобы вне зависимости от числа общей суммы, вся анимация смены цифр занимала не более 3-5 секунд. Без этого, на мой взгляд, скрипт представляется недопиленным, неидеальным что ли.
Наверное, число шага смены цифр должно меняться в зависимости от общей суммы. Количество шагов всегда одинаковое для набора любой тотальной суммы. Тогда, это число шага смены цифр задается через деление итоговой суммы на количество шагов. Такой вариант хода программистской мысли.
Буду рад, если кто-то с такой программистской мыслью усовершенствует этот код
Здравствуйте, Степан!
А подскажите мне пожалуйста, как можно выравнять слово и цифры чтобы получились на одной строчке. а то я замучился не получается это сделать
Хотелось бы вот так ———– Нам доверяют: 69483
Заранее спасибо.
Здравствуйте, Михаил!
Попробуйте вот так:
Полностью готовый код:
<script> function scroll(val,el,timeout,step){ var i=0; (function(){ if(i<=val){ setTimeout(arguments.callee,timeout); document.getElementById(el).innerHTML=i; i=i+step; }else{ document.getElementById(el).innerHTML=val; } })(); } scroll(60203,'shethik-cifra',10,60); </script> Нам доверяют: <span class="shethik-cifra" id="shethik-cifra"></span>подскажите как прикрутить этот код к калькулятору, чтоб сумма выводилась с анимацией.
И зачем такое делать?
В коде Строка №15 –
60203 – это конечная цифра
Ставите вместо этих цифр переменную, которая выводит результат в калькуляторе.
Здравствуйте, подскажите как изменить размер цифр и цвет?
Здравствуйте!
В CSS вставьте вот такой код:
div#shethik-cifra { font-size: 90px; }Что такое CSS читайте тут.
Спасибо всё чудно работает.
Пожалуйста, Мария!
Привет, а не подскажешь как реализовать такое дело. есть цыфры от 1 до 10 например, как сделать чтоб при обновлении браузера число менялось по очереди. сначала 1, потом обновил браузер стало 2 итд до 10, а на 10 когда обновляешь 10 не переходин на 1 а останется 10 ?
помоги старина
на PHP пойдет?
Здравствуйте! Подскажите пожалуйста, как можно реализовать чтоб счетчик начал смену чисел только после нажатия на кнопку?
Здравствуйте, Андрей!
<a href="#" onclick=" tiktak(20000,'shethik-cifra',10,60);" >ссылка</a> <script> // значение начальной секунды var second=10; function tiktak(val,el,timeout,step) { var i=0; (function(){ if(i<=val){ setTimeout(arguments.callee,timeout); document.getElementById(el).innerHTML=i; i=i+step; }else{ document.getElementById(el).innerHTML=val; } })(); } </script> Нам доверяют:<div class="shethik-cifra" id="shethik-cifra">0</div>Вам наверное будет интересно почитать статью на эту же тему.
Рекомендую “События HTML5“
Спасибо огромное!!!