Question

我正在尝试创建一个类似JustGiving.com的应用程序，它允许想要为慈善机构筹集资金的人注册并创建一个“广告系列”页面。在这个页面上，他们概述了他们打算做什么（例如跑马拉松或刮胡子）设定货币目标，然后邀请所有朋友通过电子邮件，推特，脸书等赞助他们......

朋友们通过PayPal进行捐赠，目标越来越近了。

我想制作某种指标，以显示广告系列与目标的接近程度。我不是在这里寻求图形帮助，但我想到了一种温度计安排，你可能会在你当地的教堂募捐活动中看到http://www.google.co.uk/search?q=target+thermometer&hl=en&prmd=ivns&tbm=isch&tbo=u&source=univ&sa=X&ei=-RfdTYrcEs-2hAeW65y3Dw&ved=0CDcQsAQ&biw=1280&bih=685

我正在构建这个网站以努力学习cakephp，我不得不承认我对php的了解并不是那么出色，所以也要这样学习。我很惊讶我已经走了多远。

无论如何，我没有一个想法，我怎么可能这样做，并想知道是否有某种灵魂会给我一点路线图。如果它是一个很棒的cakephp路线，但如果它只是正常的PHP也很酷！

Answer 1

以下是我为tescoforschoolsandclubs.co.uk

所做的工作

你有两张照片。一个人有全温度计，一个人有空温度计。

使用空的一个作为div的背景，绝对位置和图像与完整的thermomenter底部，在空的顶部。

然后，您可以设置完整图像的高度以反映％

e.g。

<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

Answer 2

我会在客户端使用JavaScript和/或CSS执行此操作，并且所有需要执行的操作都是提供当前总计和目标。然后让JavaScript计算显示温度计的“热”程度以及如何绘制温度计。

Answer 3

具体不熟悉Cake，但我会这样做：

2张图片 - 带透明指示器的温度计，后面是一个坚固的红色块。
计算控制器中的热量＆amp;将其传递给您的观点
使用内联css

像这样：

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

Answer 4

您还可以计算百分比并使用jQuery UI Progress Bar。它不会是垂直的（我不认为），并且它不会像温度计一样有球状的尖端，但它会使事情更简单和你可以在捐赠后动态改变它，当其他捐款进来时，或通过AJAX。

我将如何使用php制作慈善目标指标

4 个答案: