我将如何使用php做出慈善目标指标

问题描述

|| 我正在尝试创建一个类似于JustGiving.com的应用程序，该应用程序允许希望为慈善事业筹集资金的人注册并创建“广告系列”页面。在此页面上，他们概述了他们打算做的事情（例如，马拉松或剃光头）设定了货币目标，然后邀请所有朋友通过电子邮件，twitter，facebook等为他们提供赞助... 朋友来了，通过贝宝捐款，目标越来越近了。 我想做一个指标来显示广告系列与目标之间的距离。我不是在这里寻求有关图形的帮助，但我想起了一种温度计布置，您可能会在当地的教堂筹款活动中看到http://www.google.co.uk/search?q=target+thermometer&hl= zh-TW＆prmd = ivns＆tbm = isch＆tbo = u＆source = univ＆sa = X＆ei = -RfdTYrcEs-2hAeW65y3Dw＆ved = 0CDcQsAQ＆biw = 1280＆bih = 685 我正在建立该站点以学习CakePHP，并且我不得不承认我对PHP的了解也不是那么出色，所以也要学习。我很惊讶我走了多远。 无论如何，我没有一个想法，我怎么去做，并想知道是否某种友善的灵魂会给我一些路线图。如果这是一个cakePHP路由，那很棒，但是如果它只是普通的PHP，那也很酷！     

解决方法

这是我为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% */
}

您可以根据以下公式计算\'full \'图片的高度

height = (height of image / 100) * percentage

    ,我会在客户端使用JavaScript和/或CSS做到这一点，而所有php需要做的就是提供当前总数和目标。然后让JavaScript计算温度计的显示“热度”以及如何绘制温度计。     ,具体来说，我不熟悉Cake，但是我会这样做： 2张图片-带有透明指示器的温度计，其后为红色实心方块。 计算控制器中的热量并将其传递给视图 使用内联CSS设置红色块的样式 像这样：

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

    ,您也可以计算百分比并使用jQuery UI Progress Bar。它不会是垂直的（我不认为），也不会像温度计那样具有球形的尖端，但是它将使事情变得更简单，您可以在捐赠后或通过AJAX进行动态更改其他捐款进来。