Путь к статье: Главная » Разное

Добрый день, сегодня захотел визуально дополнить блок «выполнение цели», который находиться у меня в сайдбаре. Раньше у меня выводилось только в процентах, а сейчас ещё добавил progress bar, который более наглядно показывает нынешнюю ситуацию.

progress bar css

Про то как это всё работает, я и опишу ниже.
Если мы хотим выводить progress bar, то нам нужно получить значение, на основе которого будет строиться сама полоска. Это может быть количество посетителей в день, месяц, подписчики, в общем всё что угодно, главное что бы мы могли получить числовое значение. В моём случае это количество уникальных посетителей в день, взятых в среднем за последние 7 дней.

Код

Код скрипта в sidebar.php:

 <?php function listat($url){
$content = file_get_contents("http://counter.yadro.ru/values?site=cospi.ru");
preg_match_all("|LI_([^ ]+) = (\d*);|",$content,$ok);
for($i=0; $i<count($ok[1]); $i++) $info[$ok[1][$i]]=$ok[2][$i];
return $info;}

$ff=listat($url);
$w_vis=((($ff[week_vis]/7)*100)/700);// Высчитываем средние значение посетителей
$cel =round($w_vis,2);?>

[week_vis] - получаем значение уникальнных посетителей за неделю по Li, так же от туда можно сграбить
[today_vis] - посетители за сегодня. Зайдя на http://counter.yadro.ru/values?site=вашсайт.ру вы увидите все доступные значения.

Вывод всего блока со значениями:

<div class="meter"><span style="width: &lt;?echo">%"&gt; <?echo "$cel%";?>
</span></div>

Строчка style="width: <?echo "$cel";?>%" оформляет размер нашего progress bara в зависимости от значения полученного от скрипта, то есть если скрипт отдаёт 30%, то мы увидим такое:

progress bar css

Если скрипт насчитает 60%, наш progress bar увеличит свою ширину вот так:

progress bar css

Оформление

Оформление в css у меня выглядит вот так:

 .meter { position: relative; background: #afafaf; border: 1px solid black; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; width: 270px; height: 13px; padding: 5px; margin-top:10px; } #proc { display: block; width: 100%; text-align: center; font-size: 14px; font-family: Tahoma, Arial; font-weight: bold; color: #eee; text-shadow: 0px 1px 0px #333; position: absolute; top: 0; line-height: 24px;} .meter &gt; span { display: block; height: 100%; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background: url('bg.gif') 0px 0px repeat; border: 1px solid #37c; }

Многие блогеры ставят себе цели по достижению количество подписчиков на блоге. Поможет получить численное значение подписчиков по feedburner вот такой скрипт:

 <?php
$fburl="http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=Cospi";
$grid = new SimpleXMLElement(file_get_contents($fburl));
echo $grid->feed->entry['circulation']; //Вывод числового значения подписч.
?>

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


Поделитесь записью:


Комментарии
  1. x

    Никак не могу понять в чем дело… не применяются стили #proc и .meter > span У тебя на сайте всё ок отображается

  2. jkeks

    Это тоже своеобразный мотиватор, заведу-ка я себе такой же на jkeks.ru, Спасибо COSPI

  3. x

    Да я всё скопировал в точности, можешь зайти сам посмотреть на бложик в правом сайдбаре, если делать нехуй будет)

  4. Cospi

    Посмотрел, вообще места там мало у тебя для полоски. И с цветами надо поиграться, а то тёмный какой-то progress bar на твоём дизайне.

  5. x

    Мало то мало, но какого хера не применяются два стиля из трех, я ваще не могу вкурить

  6. x

    В общем пофиксил, какието конфликты были, если твой код в начало CSS файла впихать, но всё норм )

  7. jkeks

    Пока делал Прогресс бар, перебрал кучу в итоге поставил Google Chart, гляньте пожалуйста, целая диаграммка, жаль что не анимированная. http://jkeks.ru , не подумайте что я спамлю, просто я люблю всякие аяксы и виджеты.

  8. x

    С процентиками поприкольнее, да, спасибо за интересный дизайн прогрес бара :))

  9. Riv3ro

    Cospi хотел попросить не мог бы ты разжевать то, что у тебя написано в for, а то сам не могу разобраться.. А вообще спасибо задумка хорошая, сделал уже себе но не на сайте а так для личной мотивации. Хочу доработать для себя есть пару идей.

  10. Cospi

    Riv3ro Этот цикл создает ассоциативный массив, на основе регулярного выражения. это делается для удобства работы дальше. Обратившись к массиву например так: $info[today_vis], мы получим соответственно кол-во просмотров страницы за сегодня.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *