ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Информер - счётчик материалов (Бегущие цифры)

Информер - счётчик материалов (Бегущие цифры)

Информер - счётчик материалов (Бегущие цифры)
Многие наверное замечали на сайтах (Интернет магазинах), для наглядности интересный показатель каких либо данных в виде анимации цифр. На главной странице сайта в отдельной таблице к примеру показывается сколько заказов выполнено, довольных клиентов, материалов в наличии и так далее.

Существует несколько вариантов скриптов, выбрал один из них на JSFiddle, решил переделать его под
информер счётчика материалов, набросал стилей, так как просто цифры скучновато выглядят.

Вообщем создаём информер в ПУ сайта: счётчик материалов (материалы) и меняем в нём код на этот:
Код

<div class="running">
<div class="container">
<div class="numbers">Файлы<br><?if($LOAD$)?><b id="example1"></b><?else?><b>0</b><?endif?></div>
<div class="numbers">Фото<br><?if($PHOTO$)?><b id="example2"></b><?else?><b>0</b><?endif?></div>
<div class="numbers">Статьи<br><?if($PUBL$)?><b id="example3"></b><?else?><b>0</b><?endif?></div>
<div class="numbers">Новости<br><?if($NEWS$)?><b id="example4"></b><?else?><b>0</b><?endif?></div>
</div>
</div>


Тут я конечно привёл пример, данные которые хотите видеть меняйте на свои, к примеру они указаны в коде по умолчанию информера.

Добавляем тут же в информер стили (либо в общую таблицу CSS), которые можно легко понять и переделать:

CSS
Код

.running {
text-align: center;
}
.container {
display: inline-block;
}
.numbers {
color: white;
font-size: 16px;
display: block;
float: left;
margin: 5px;
border-radius: 3px;
background: SteelBlue;
width: 105px;
height: 45px;
border: 1px solid LightGray;
box-shadow:0 5px 5px #000;
-moz-box-shadow:0 5px 5px #000;
-webkit-box-shadow:0 5px 5px #000;  
}  


Ну и сам скрипт, в который уже вбил операторы ucoz отвечающие за вывод количество материалов.
Не забывайте тут тоже менять на свои (или добавлять), это пример. (Скрипт также можно оставить в информере).

Код

<script type="text/javascript">
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
  var now = (new Date().getTime()) - start;
  var progress = now / duration;
  var result = Math.floor((to - from) * progress + from);
  element.innerHTML = progress < 1 ? result : to;
  if (progress < 1) setTimeout(arguments.callee, 5);
}, 5);
}
number_to("example1",0,$LOAD$,1500);
number_to("example2",0,$PHOTO$,1500);
number_to("example3",0,$PUBL$,1500);
number_to("example4",0,$NEWS$,1500);
};
</script>


0 - точка отсчёта, $LOAD$ - кол-во материалов каталога файлов, 8000 - скорость

Остаётся только поставить код информера типа $MYINF_1$ на страницу сайта.

Ну и добавлю в конце, заметил в HTML коде если выводить оператор несуществующего модуля то весь
скрипт не будет работать.
28 Июля 2016 Просмотров: 2781 Комментариев: (69)
Поделиться в социальных сетях

Материал разместил
Angerfist
Похожие материалы

Оставь свой отзыв

Комментарии: 69
Scheme
Scheme 28 Июля 2016 16:581
0
Вообще подумал баннеры какие то, паровозика не хватает их тянуть, а здесь вот как все сделано, очень оригинально придумано.
Сопрано
Сопрано 28 Июля 2016 18:092
0
Круто переделал.
Kosten
Kosten 28 Июля 2016 18:173
0
Оригинально переделано, есть просто надписи, на на сайте, здесь в своем окошке будет выводить, и думаю можно по цвету изменить под сайт кому нужно.
tsakonter
tsakonter 28 Июля 2016 18:324
0
Там же должны операторы быть, или скрипт все будет выводить?
Angerfist
Angerfist 28 Июля 2016 18:395
0
Исправил код, просто при редактировании визуальный редактор творит чудеса, часть кода с операторами была стёрта.
Djeksen
Djeksen 28 Июля 2016 19:026
0
не работает что-то, до 10 сделал. че-то цифр нет. что значит 5?
Angerfist
Angerfist 28 Июля 2016 19:087
0
Код подправил, часть кода была стёрта...5 интервал до начала отсчёта
Djeksen
Djeksen 28 Июля 2016 19:208
0
Тоже самое. без цифр.
Код
<div class="running">
<div class="container">
<div class="numbers">Комментари<?if($CΟMMENTS_NUM$%10=0||$CΟMMENTS_NUM$%10>4||$CΟMMENTS_NUM$%100>10&&$CΟMMENTS_NUM$%100<15)?>ев<?else?><?if($CΟMMENTS_NUM$%10=1)?>й<?else?>я<?endif?><?endif?><br><?if($COM$)?><b id="example"></b><?endif?></div>
<div class="numbers">Ответов<br><?if($LOAD$)?><b id="example2"></b><?endif?></div>
<div class="numbers">Материалов<br><?if($PUBL$)?><b id="example3"></b><?endif?></div>
<div class="numbers">Статей<br><?if($PUBL$)?><b id="example4"></b><?endif?></div>
<div class="numbers">фото<br><?if($PHOTO$)?><b id="example5"></b><?endif?></div>
<div class="numbers">Сайтов<br><?if($DIR$)?><b id="example6"></b><?endif?></div>
<div class="numbers">Новостей<br><?if($NEWS$)?><b id="example7"></b><?endif?></div>
<div class="numbers">Объявлений<br><?if($BOARD$)?><b id="example8"></b><?endif?></div>
<div class="numbers">Видео<br><?if($STUFF$)?><b id="example9"></b><?endif?></div>
<div class="numbers">Товары<br><?if($SHOP$)?><b id="example10"></b><?endif?></div>
</div>
</div>

в скрипте добавил 6пунктов. все равно ....
Сопрано
Сопрано 28 Июля 2016 19:2610
0
Djeksen, это что за код, с операторами, тоже самое, только без дизайн.
Djeksen
Djeksen 28 Июля 2016 19:269
0
Может number_to а не numbers ?
Angerfist
Angerfist 28 Июля 2016 19:2811
0
Ща попробую разобраться в вашем бутерброде
Angerfist
Angerfist 28 Июля 2016 19:3613
0
С выводом комментариев куча условий)
В исходнике глянуть надо было
там так:
Код
<?if($COMMENTS$)?>Comments: <b>$COMMENTS$</b><br><?endif?>
Djeksen
Djeksen 28 Июля 2016 19:5421
0
Без этого ?
Код
<div class="numbers"><b id="example7"></b></div>
Angerfist
Angerfist 28 Июля 2016 19:4016
0
Стирай свой код в комментах) ломает каркас) Ответ на вопрос: с этим)
Scheme
Scheme 28 Июля 2016 19:3312
0
Так как говорил не плохо, но вот тени, сейчас с ними как то мало кто ставит, но здесь кому как нравится.

Angerfist
Angerfist 28 Июля 2016 19:3714
0
Я до кучи для любителей теней, всегда можно убрать)
1 2 3 4 »
Войдите:
avatar