Javascript 用CSS绘制水容器

我不是很擅长JS，即使在阅读了教程之后，所以我在这里寻求帮助

我认为一个JSFIDLE会有所帮助

我正在尝试使用JS创建一个小盒子，当“水容器已满”时，盒子从下到上填充绿色。当水容器为一半时，盒子为半绿色表示半满。当容器是空的，没有水时，JS绘制的盒子是空的，没有绿色

所以本质上，我使用PHP做一些后端计算，输出0到1000之间的值，表示现实生活中容器的完整性。0表示容器为空，1000表示容器已装满水

现在，绘制GUI等价物是我一直坚持的。当PHP提供的值从1000变为0（水变空）时，如何使用JS绘制一个清空（绿色降低）的方框

这是一个我正在尝试的例子。所以基本上，PHP从MySQL DB中提取一个从1000到0的值，1000表示完全的绿色框，0表示GUI上完全的空框或灰色框

PHP以0-1000整数的形式提供每个框的“完整度”值

如何在JQuery中绘制这个

我假设我将使用HTML中的Content Refresh选项每5-10秒刷新一次页面，这样当PHP提供更新的数据时，框看起来会完全改变

在这里，我尝试创建3个绿色背景的div：

这样我就可以把这3个div放在另一个大div中，在3个div上做高度百分比的改变，但是我不能正确地得到CSS

HTML

这是1号包厢。
这是2号包厢。
这是3号包厢。

CSS

.DivOverlayLayouts.com div生成器{display:none}
身体{
背景色：FFFFFF
}
.包含div{
背景色：76EE00；
颜色：FFFFFF；
字体：10pt Arial，Helvetica，无衬线；
溢出：自动
}
a:链接，a:激活，a:访问，a.导航栏：链接，a.导航栏：激活，a.导航栏：访问，a.男士：链接，a.男士：激活，a.男士：访问，a:悬停，a.导航栏：悬停，a.男士：悬停{
颜色：000000；
字体：10pt Arial，Helvetica，无衬线
}
.mpd1{宽度：225px；高度：600px；顶部：0；左侧：50px；位置：绝对值}
.mpd2{宽度：225px；高度：600px；顶部：0；左侧：285px；位置：绝对值}
.mpd3{宽度：225px；高度：600px；顶部：0；左侧：520px；位置：绝对}。按住{背景色：透明}
.包含{左侧：50%；左边距：-400px；顶部：150px；位置：绝对；z索引：0；背景色：透明；可见性：可见}
.corner{左：0；顶：0；位置：绝对；z索引：9；可见性：可见！重要}
.mpd{左：50%；左边距：-400px；顶部：0；位置：绝对；z索引：9；可见性：可见！重要}
.comments{display:none}
.contacttable、.profileinfo、.latestBlogEntry、.interestsAndDetails、.extendedNetwork、.orangetext15{display:none}
.bodyContent div div表单{display:inline}
.bodyContent表{可见性：隐藏}
a img{border:none}
td，形式{边距：0；填充：0}
表，tr，td{背景：透明}
DivOverlayLayouts.com附加编码{display:none}

以下是解决您问题的可能方法-显示水：

小提琴：

---

以下是解决您问题的一个可能方法-展示水：

小提琴：

---

通常情况下，问题海报提供了一个他已经得到的答案；）您是否尝试过使用CSS（嵌套在具有高度百分比的div中的div）？@我现在就尝试一下。我从未想过使用CSS。真聪明！在这里，我尝试使用JSfiddle创建3个绿色背景的div，但是我得到了白色：您没有颜色，因为您错过了颜色代码中的#。你的小提琴修好了一点：@purefilture，不，不是“正常”，但它确实有帮助。备选方案是bootply、jsbin等。通常情况下，问题海报会提供一个jsfiddle，其中包含他已经得到的信息；）您是否尝试过使用CSS（嵌套在具有高度百分比的div中的div）？@我现在就尝试一下。我从未想过使用CSS。真聪明！在这里，我尝试使用JSfiddle创建3个绿色背景的div，但是我得到了白色：您没有颜色，因为您错过了颜色代码中的#。你的小提琴修好了一点：@purefilture，不，不是“正常”，但它确实有帮助。备选方案是bootply、jsbin等，这正是我想要的！非常感谢。会花我半天的时间，哈哈。这正是我想要的！非常感谢。会花我半天的时间，哈哈。

</cite>

<div class="hold"><div class="contain">
<div class="mpd1">This is box 1.</div>
<div class="mpd2">This is box 2.</div>
<div class="mpd3">This is box 3.</div></div></div>
<div class="corner"></div>
<div class="mpd"><a href="http://www.myspaceprodesigns.com"><img src="http://www.myspaceprodesigns.com/images/MPD.jpg" alt="myspace div generator" title="myspace div generator"></a></div>
<div class="comments">
<table><tr><td>
<table><tr><td>

<cite style="display:none">

</cite>

<style type="text/css">
.DivOverlayLayouts.com-div-generator{display:none}
body {
background-color:FFFFFF
}
.contain div {
background-color:76EE00;
color:FFFFFF;
font: 10pt Arial,Helvetica,sans-serif;
overflow:auto
}
a:link, a:active, a:visited, a.navbar:link, a.navbar:active, a.navbar:visited, a.man:link, a.man:active, a.man:visited, a:hover, a.navbar:hover, a.man:hover {
color:000000;
font: 10pt Arial,Helvetica,sans-serif
}
.mpd1{width:225px;height:600px;top:0;left:50px;position:absolute}
.mpd2{width:225px;height:600px;top:0;left:285px;position:absolute}
.mpd3{width:225px;height:600px;top:0;left:520px;position:absolute}.hold{background-color:transparent} 
.contain{left:50%;margin-left:-400px;top:150px;position:absolute;z-index:0;background-color:transparent;visibility:visible}
.corner{left:0;top:0;position:absolute;z-index:9;visibility:visible !important}
.mpd{left:50%;margin-left:-400px;top:0;position:absolute;z-index:9;visibility:visible !important}
.comments{display:none}
.contacttable,.profileinfo,.latestBlogEntry,.interestsAndDetails,.extendedNetwork,.orangetext15{display:none}
.bodyContent div div form{display:inline}
.bodyContent table table table{visibility:hidden}
a img{border:none}
td,form{margin:0;padding:0}
table,tr,td{background:transparent}
DivOverlayLayouts.com-additional-coding{display:none}
</style>

<div class="tank">
    <div class="water" style="height: 30%;"></div>
</div>

<div class="tank">
    <div class="water" style="height: 70%;"></div>
</div>

<div class="tank">
    <div class="water" style="height: 10%;"></div>
</div>

.tank {
    /* size */
    width: 150px;
    height: 300px;

    /* colors */
    border: 2px solid black;
    background: white;

    position: relative; /* to allow positioning the water at bottom */

    display: inline-block; /* so the div doesn't wrap */
    margin: 10px; /* space between divs */
}

.tank .water {
    position: absolute;

    /* color of water */
    background: blue;

    /* water position */
    width: 100%;
    bottom: 0;
}