Скрипт анимированного счетчика

Скрипт анимированного счетчика

62011-04-2132088Денис Абдуллин
Здесь предоставлено четыре вида анимированного счетчика. Основываясь на нем, можно сделать интересную загрузку для сайта, счетчик кликов, показ времени проведения на странице. Для хорошего примера я использовал CSS. Вы можете использовать изображения, изменив код стиля. В примере для обычного счетчика сделано так: каждую миллисекунду к числовому значению прибавляется единичка, а полоса на фоне, уже по другому заданному времени, растягивается. Возможно, прочитав это, Вы ничего не поняли, поэтому советую посмотреть пример в демонстрации.

Бесконечная загрузка



Число на полоске растет бесконечно, но благодаря CSS, обрезается текст.



Загрузка с окончанием



По окончанию заданного промежутка, скрипт выдает сообщение об окончании.



Загрузка с исчезанием



После нужного результата, полоса загрузки исчезает.



"Кликомания"



В этом примере полоса тянется при клике, также увеличивается и число.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (8)
Оксана Чудина 2011-04-21 в 15:12Спам
Отлично спасибо, применю wink
4
Александр Ильин 2011-04-21 в 17:24Спам
Классно, переделаю под репутацию)))
3
Оксана Чудина 2011-04-21 в 18:42Спам
ага, желательно бесконечную, чтобы росла и росла:)
4
Александр Ильин 2011-04-21 в 18:48Спам
biggrin
2
Гладнев Ярослав 2011-04-22 в 00:45Спам
сделали бы щетчик кликов,только чтоб нетак как тут,а чтоб всех пользователей щитало,и чтоб больше 1 раза кликнуть нельзя было...
-2
Оксана Чудина 2011-04-22 в 00:57Спам
Ну так в чем же дело, переменные if тебе в помощь
3
Василий Петров 2011-05-06 в 22:09Спам
как сделать так чтобы после того как счетчик исчез появилась ссылка?
1
Денис Абдуллин 2011-05-07 в 12:45Спам
"Загрузка с исчезанием"

Там есть вот это document.getElementById('id_e').innerHTML='Загрузка завершена';$('.box_up').fadeOut(3000)

Убрать нужно $('.box_up').fadeOut(3000)

А вместо надписи "Загрузка завершена" можно поставить ссылку, например, <a href="#">Скачать</a>

0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.