» »

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


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

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

Существует несколько вариантов скриптов, выбрал один из них на 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.07.2016 Просмотров: 623 Комментарий: (69)

Поделиться в социальных сетях

Материал разместил

Комментарий: 69
Scheme
Scheme 28.07.2016 16:581
0
Вообще подумал баннеры какие то, паровозика не хватает их тянуть, а здесь вот как все сделано, очень оригинально придумано.
Сопрано
Сопрано 28.07.2016 18:092
0
Круто переделал.
Kosten
Kosten 28.07.2016 18:173
0
Оригинально переделано, есть просто надписи, на на сайте, здесь в своем окошке будет выводить, и думаю можно по цвету изменить под сайт кому нужно.
tsakonter
tsakonter 28.07.2016 18:324
0
Там же должны операторы быть, или скрипт все будет выводить?
Angerfist
Angerfist 28.07.2016 18:395
0
Исправил код, просто при редактировании визуальный редактор творит чудеса, часть кода с операторами была стёрта.
Djeksen
Djeksen 28.07.2016 19:026
0
не работает что-то, до 10 сделал. че-то цифр нет. что значит 5?
Angerfist
Angerfist 28.07.2016 19:087
0
Код подправил, часть кода была стёрта...5 интервал до начала отсчёта
Djeksen
Djeksen 28.07.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.07.2016 19:2610
0
Djeksen, это что за код, с операторами, тоже самое, только без дизайн.
Djeksen
Djeksen 28.07.2016 19:269
0
Может number_to а не numbers ?
Angerfist
Angerfist 28.07.2016 19:2811
0
Ща попробую разобраться в вашем бутерброде
Angerfist
Angerfist 28.07.2016 19:3613
0
С выводом комментариев куча условий)
В исходнике глянуть надо было
там так:
Код
<?if($COMMENTS$)?>Comments: <b>$COMMENTS$</b><br><?endif?>
Djeksen
Djeksen 28.07.2016 19:5421
0
Без этого ?
Код
<div class="numbers"><b id="example7"></b></div>
Angerfist
Angerfist 28.07.2016 19:4016
0
Стирай свой код в комментах) ломает каркас) Ответ на вопрос: с этим)
Scheme
Scheme 28.07.2016 19:3312
0
Так как говорил не плохо, но вот тени, сейчас с ними как то мало кто ставит, но здесь кому как нравится.

Angerfist
Angerfist 28.07.2016 19:3714
0
Я до кучи для любителей теней, всегда можно убрать)
Angerfist
Angerfist 28.07.2016 19:3815
0
Код
<?if($COMMENTS$)?>Comments: <b>$COMMENTS$</b><br><?endif?>  
<?if($FORUM_T$)?>Forum: <b>$FORUM_T$/$FORUM_P$</b><br><?endif?>  
<?if($PHOTO$)?>Photo: <b>$PHOTO$</b><br><?endif?>  
<?if($BLOG$)?>Blog: <b>$BLOG$</b><br><?endif?>  
<?if($NEWS$)?>News: <b>$NEWS$</b><br><?endif?>  
<?if($LOAD$)?>Downloads: <b>$LOAD$</b><br><?endif?>  
<?if($PUBL$)?>Publisher: <b>$PUBL$</b><br><?endif?>  
<?if($DIR$)?>Directory: <b>$DIR$</b><br><?endif?>  
<?if($BOARD$)?>Ad-board: <b>$BOARD$</b><br><?endif?>  
<?if($STUFF$)?>Games: <b>$STUFF$</b><br><?endif?>  
<?if($VIDEO$)?>Video: <b>$VIDEO$</b><br><?endif?>  
<?if($SHOP_GOODS$)?>Goods: <b>$SHOP_GOODS$</b><br><?endif?>  
<?if($SHOP_TOTAL_ORDERS$)?>Orders: <b>$SHOP_NEW_ORDERS$/$SHOP_TOTAL_ORDERS$</b><br><?endif?>  
<?if($SHOP_TOTAL_AMOUNT$)?>Turnover: <b>$SHOP_TOTAL_AMOUNT$</b><br><?endif?>  
<?if($SHOP_TOTAL_PROFIT$)?>Profit: <b>$SHOP_TOTAL_PROFIT$</b><br><?endif?>  
<?if($FAQ$)?>FAQ: <b>$FAQ$</b><br><?endif?>  
<?if($GB$)?>Guestbook: <b>$GB$</b><br><?endif?>  
<?if($TESTS$)?>Tests: <b>$TESTS$</b><br><?endif?>
Kosten
Kosten 28.07.2016 19:4117
0
Здесь видать все операторы собраны, которые можно задействовать.
Angerfist
Angerfist 28.07.2016 19:4418
0
Да,а то у человека там бутерброд условий в коде
Angerfist
Angerfist 28.07.2016 19:4619
+1
Djeksen,советую не спешить, по 1 пункту добавлять и проверять, и если не работает искать ошибку сразу а не копать весь код, и добавлю если будет оператор который ничего не выводит или не активирован модуль то весь скрипт не будет работать
Djeksen
Djeksen 28.07.2016 19:4920
0
всё активирована. ща проверим
Kosten
Kosten 28.07.2016 20:0723
0
Вы установили, можно скрин посмотреть?
Djeksen
Djeksen 28.07.2016 20:0825
0
Kosten
Kosten 28.07.2016 20:1628
0
Мне так кажется, что теней очень много в низу, понимаю, что под темный, там все сгладиться, на светлом нужно убрать немного.
Djeksen
Djeksen 28.07.2016 20:0222
0
ААА не удается чето...
1 2 3 »
avatar