Вывод результатов вычисления PHP функции с помощью изображений

Эксперимент проводится на php функции, которая вычисляет возраст блога (или в общем говоря, отсчитывает время от заданной даты) (о ней написано в статье от 7 марта 2010 г. «PHP стриптиз. Хаки и короткие PHP коды для WordPress») Тогда использовался следующий код:

<?
// конфигурация базовой даты
$base_day        = 22;        // без «0»
$base_mon        = 3;        // без «0»
$base_yr        = 2009;        // в четырехзначном формате!
// текущая дата
$current_day        = date («j»);
$current_mon        = date («m»);
$current_yr        = date («Y»);
// теперь вычисляем разницу! 🙂
// overflow is always caused by max days of $base_mon
// so we need to know how many days $base_mon had
$base_mon_max        = date («t»,mktime (0,0,0,$base_mon,$base_day,$base_yr));
// days left till the end of that month
$base_day_diff         = $base_mon_max — $base_day;
// month left till end of that year
// substract one to handle overflow correctly
$base_mon_diff         = 12 — $base_mon — 1;
// start on jan 1st of the next year
$start_day        = 1;
$start_mon        = 1;
$start_yr        = $base_yr + 1;
// difference to that 1st of jan
$day_diff    = ($current_day — $start_day) + 1;     // add today
$mon_diff    = ($current_mon — $start_mon) + 1;    // add current month
$yr_diff    = ($current_yr — $start_yr);
// and add the rest of $base_yr
$day_diff    = $day_diff + $base_day_diff;
$mon_diff    = $mon_diff + $base_mon_diff;
// handle overflow of days
if ($day_diff >= $base_mon_max)
{
$day_diff = $day_diff — $base_mon_max;
$mon_diff = $mon_diff + 1;
}
// handle overflow of years
if ($mon_diff >= 12)
{
$mon_diff = $mon_diff — 12;
$yr_diff = $yr_diff + 1;
}
// Вывод результатов:
// $yr_diff      --> годы между двумя датами
// $mon_diff     --> месяцы между двумя датами
// $day_diff     --> дни между двумя датами
print «<div id=\»blogageyear\">".$yr_diff."</div>";
print «<div id=\»blogagemonths\">".$mon_diff. «</div>»;
print «<div id=\»blogagedays\">".$day_diff."</div>";
?>

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

В определенный момент, когда произошло мое заочное знакомство с операционной системой для мобильных устройств Android, а именно с флагманом мобилестроения HTC Desire HD и его фирменными часами в виде цифрового табло, у меня загорелось сделать что-то, отдаленно напоминающее, у себя на блоге, одновременно вписавшись в свой цветовой бело-красно-серый цветовой формат.

HTC Desire HD

Будем использовать тот же самый скрипт, только немного видоизменим его, уберем лишнее и добавим недостающее, но сначала в программе Photoshop нарисуем все варианты нашего цифрового табло. Получится, что нужно несколько изображений для годов (я сделал 5, за это время точно что нибудь изменится), двенадцать изображений для месяцев и тридцать картинок для дней. Вот что у меня получилось, стиль «слизан» с Android, цвета блога Белая Шляпа:

Кому нужны исходники этих изображений, пожалуйста пишите мне через страницу контактов, с удовольствием вышлю бесплатно. Дальше идет список файлов изображений по соответствующим группам:

Годы:

years1.png years2.png years3.png years4.png years5.png

Месяцы:

months0.png months1.png months2.png months3.png months4.png months5.png months6.png months7.png months8.png months9.png months10.png months11.png

Дни:

day0.png day1.png day2.png day3.png day4.png day5.png day6.png day7.png day8.png day9.png day10.png day11.png day12.png day13.png day14.png day15.png day16.png day17.png day18.png    day19.png day20.png day21.png day22.png day23.png day24.png day25.png day26.png day27.png day28.png day29.png day30.png day31.png

Итак, картинки мы сделали или взяли мои, и назвали их именно так, как видно на скриншоте или в списке (!!!) (потому что именно на именах файлов картинок и основывается наш новый код), теперь приступаем к программной части. Создайте файл blogage.tpl, положите его в папку include вашего шаблона (если ее нет, то создайте, не помешает), в него вставьте следующий код:

<?
// конфигурация базовой даты
$base_day        = 22;        // без «0»
$base_mon        = 3;        // без «0»
$base_yr        = 2009;        // в четырехзначном формате!
// текущая дата
$current_day        = date («j»);
$current_mon        = date («m»);
$current_yr        = date («Y»);
// теперь вычисляем разницу! 🙂
// overflow is always caused by max days of $base_mon
// so we need to know how many days $base_mon had
$base_mon_max        = date («t»,mktime (0,0,0,$base_mon,$base_day,$base_yr));
// days left till the end of that month
$base_day_diff         = $base_mon_max — $base_day;
// month left till end of that year
// substract one to handle overflow correctly
$base_mon_diff         = 12 — $base_mon — 1;
// start on jan 1st of the next year
$start_day        = 1;
$start_mon        = 1;
$start_yr        = $base_yr + 1;
// difference to that 1st of jan
$day_diff    = ($current_day — $start_day) + 1;     // add today
$mon_diff    = ($current_mon — $start_mon) + 1;    // add current month
$yr_diff    = ($current_yr — $start_yr);
// and add the rest of $base_yr
$day_diff    = $day_diff + $base_day_diff;
$mon_diff    = $mon_diff + $base_mon_diff;
// handle overflow of days
if ($day_diff >= $base_mon_max)
{
$day_diff = $day_diff — $base_mon_max;
$mon_diff = $mon_diff + 1;
}
// handle overflow of years
if ($mon_diff >= 12)
{
$mon_diff = $mon_diff — 12;
$yr_diff = $yr_diff + 1;
}
// Вывод результатов:
// $yr_diff      --> годы между двумя датами
// $mon_diff     --> месяцы между двумя датами
// $day_diff     --> дни между двумя датами
//print «<div id=\»blogageyear\">".$yr_diff."</div>";
//print «<div id=\»blogagemonths\">".$mon_diff. «</div>»;
//print «<div id=\»blogagedays\">".$day_diff."</div>";
print"<div id=\"blogageyear\"><img src=\"/wp-content/themes/idream/images/blogage/years/years".$yr_diff.".png\"></div>";
print «<div id=\»blogagemonths\"><img src=\"/wp-content/themes/idream/images/blogage/months/months".$mon_diff.".png\"></div>";
print «<div id=\»blogagedays\"><img src=\"/wp-content/themes/idream/images/blogage/days/day".$day_diff.".png\"></div>";
?>

В коде видно, что вывод результатов в виде текста закомментирован (то есть не работает) и в последних трех строках применен вывод картинок, с соответствующим названием файла.

Дальше, в том месте, где вы хотите вывести новое табло, добавьте следующую строку:

<div id="blogage"><?php include (TEMPLATEPATH . '/include/blogage.tpl'); ?></div>

Этот отрезок кода присоединит вновь созданный файл blogage.tpl в папке include.

Вы видите, что к выводу результатов возраста блога в виде картинок применены четыре новых стиля: #blogage #blogageyear #blogagemonths #blogagedays. Я приведу для вас листинг этих стилей, которые вы сможете использовать как есть или изменить под дизайн своего блога:

#blogage{
width: 210px;
clear: both;
overflow: hidden;
border:4px solid #c00000;
padding:5px 30px 5px 30px;
}
#blogageyear{
float: left;
text-align: right;
height:150px;
width: 110px;
}
#blogagemonths{
width: 90px;
float: right;
height:85px;
text-align: left;
}
#blogagedays{
width:90px;
float: right;
height:65px;
padding-top: 5px;
}

Расположение блоков дней, месяцев и лет задано, как видите, тоже стилями, которые вы можете тоже изменить. Да вот еще что, надо дать вам размеры картинок. Вот они:

Желаю удачи. Задавайте вопросы, если они возникнут.

Короткий адрес этой заметки: http://www.eavasi.ru/?p=5822, опубликуйте его в Твиттере или Вконтакте, а можете в Facebook

  1. Святослав

    Интересный скрипт, почти то что надо, только есть вопрос, можно реализовать вывод вместо лет и месяцев — дни, часы, минуты?

    1. eavasi Автор записи

      Конечно можно. Если воспользуетесь поиском, то легко найдете необходимое.

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

Ваш e-mail не будет опубликован.