如何使用php制作慈善目标指示器

我正在尝试创建一个有点像JustGiving.com的应用程序，它允许那些想为慈善事业筹款的人注册并创建一个“活动”页面。在这个页面上，他们概述了自己的计划（比如跑马拉松或剃光头），设定了一个金钱目标，然后邀请所有的朋友通过电子邮件、推特、facebook等为他们提供赞助

朋友们通过paypal来捐款，目标就更近了

我想做一个指标来显示这场运动离目标有多近。我并不是在这里寻求有关图表的帮助，但我想到了一种温度计的安排，你们可能会在当地教堂的募捐活动中看到

我建立这个网站是为了学习cakephp，我必须承认我对php的了解也不是那么出色，所以也要学习它。我很惊讶我能走这么远

---

不管怎样，我不知道该怎么做，我想知道是否有善良的灵魂会给我一张路线图。如果它是一个cakephp路径，那就很棒，但是如果它只是普通的php，那也很酷

我会在客户端使用JavaScript和/或CSS，php需要做的就是提供当前的总数和目标。然后让JavaScript计算显示温度计的“热”程度以及如何绘制温度计。

不太熟悉蛋糕，但我会这样做：

• 2张图片-带透明指示器的温度计，其后面是一个红色实心块
• 计算控制器中的热量并将其传递给视图
• 使用内嵌css设置红色块的样式

像这样：

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

“>

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

以下是我为TescoforSchool和Clubs.co.uk所做的

你有两个图像。一个是满温度计，一个是空温度计

使用空的一个作为背景的一个div，绝对位置和图像和充分的温度计底部，右上方的空一个

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

e、 g

您可以根据以下公式计算“完整”图像的高度：

height = (height of image / 100) * percentage

---

哇，太快了，而且非常全面。谢谢。现在就去试一试：）

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

height = (height of image / 100) * percentage