Блог

Главная - Вопросы по программированию - Как бы мне создать целевой индикатор благотворительности с помощью php

Как бы мне создать целевой индикатор благотворительности с помощью php

#php #javascript #html #cakephp

#php #javascript #HTML #cakephp

Вопрос:

Я пытаюсь создать приложение, немного похожее JustGiving.com , который позволяет людям, которые хотят собрать деньги на благотворительность, зарегистрироваться и создать страницу «кампании». На этой странице они описывают, что они предлагают сделать (например, пробежать марафон или побриться налысо), устанавливают денежную цель, а затем приглашают всех своих друзей спонсировать их по электронной почте, Facebook, Twitter и т.д…

Друзья приходят и делают пожертвования через PayPal, и цель становится ближе.

Я хочу создать какой-нибудь индикатор, чтобы показать, насколько близка к цели кампания. Я не прошу здесь помощи с графикой, но я имел в виду что-то вроде термометра, который вы могли бы увидеть на благотворительном вечере в вашей местной церквиhttp://www.google.co.uk/search ?q=target thermometeramp;hl=enamp;prmd=ivnsamp;tbm=ischamp;tbo=uamp;source=univamp;sa=Xamp;ei=-RfdTYrcEs-2hAeW65y3Dwamp;ved=0CDcQsAQamp;biw=1280amp;bih=685

Я создаю этот сайт в попытке изучить cakephp, и я должен признать, что мои знания php тоже не так уж блестящи, поэтому изучаю и это. Я удивлен, как далеко я продвинулся.

В любом случае, я понятия не имею, как я мог бы это сделать, и подумал, не даст ли мне какая-нибудь добрая душа что-то вроде карты маршрута. Если это маршрут cakephp, это здорово, но если это просто обычный php, это тоже круто!

Ответ №1:

Вот как я это сделал для tescoforschoolsandclubs.co.uk

У вас есть два изображения. У одного есть полный термометр, у другого — пустой термометр.

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

Затем вы можете установить высоту полного изображения, чтобы отразить %

например

 <div id='thermometer'>
<img src='full'>
</div>

#thermometer {
  width: 100px;
  height: 200px;
  position: relative;
  background: url(empty.jpg) no-repeat top left;
}
#thermometer img{
  position: absolute;
  bottom: 0;
  left: 0;
}

и затем:

 #thermometer img{
  height: 0; /* completely empty */
}
#thermometer img {
  height: 100px; /* 50% */
}
#thermometer img {
  height: 200px; /* 100% */
}

Вы можете рассчитать высоту «полного» изображения на основе 

 height = (height of image / 100) * percentage

Комментарии:

1. Вау, это было быстро и очень всеобъемлюще. Спасибо. Пора попробовать прямо сейчас 🙂

Ответ №2:

Я бы сделал это с помощью JavaScript и / или CSS на стороне клиента, и все, что нужно было бы сделать php, это указать текущую сумму и цель. Затем позвольте JavaScript вычислить, насколько «горячий» для отображения термометр и как его нарисовать.

Ответ №3:

Не знаком конкретно с Cake, но вот как я бы это сделал:

  • 2 изображения — термометр с прозрачным индикатором, за ним сплошной красный блок.
  • Рассчитайте тепло в вашем контроллере и передайте его вашему представлению
  • Оформите красный блок с помощью встроенного css

вот так:

   <img src="red.gif" style="height: <?php echo $bar_height ?> ">

Ответ №4:

Вы также могли бы рассчитать процент и использовать индикатор выполнения пользовательского интерфейса jQuery. Он не был бы вертикальным (я не думаю), и у него не было бы выпуклого кончика, как у термометра, но это упростило бы задачу, и вы могли бы динамически изменять его после пожертвования или через AJAX, когда поступают другие пожертвования.