javascript - 用CSS绘制水容器

Question

即使读完教程，我对 JS 也不是很擅长，所以我在这里寻求帮助。

我认为 jsfiddle 会有所帮助。

我正在尝试使用JS创建一个小盒子，当“水容器已满”时，盒子从下到上填充绿色。当水容器是一半时，盒子是半绿色的，意味着半满。当容器是空的，没有水的时候，JS画的盒子都是空的，没有绿色。

所以本质上，我正在使用 PHP 进行一些后端计算，输出 0 到 1000 之间的值，指示现实生活中容器的填充度。 0 表示容器是空的，1000 表示容器已装满水。

现在我所坚持的就是绘制等效的 GUI。如何使用 JS 绘制一个盒子，当 PHP 提供的值从 1000 到 0(水排空)时，该盒子会排空(绿色降低)

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

/image/j6642.png

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

如何在 JQuery 中绘制它？

我假设我将使用 HTML 中的“内容刷新”选项每 5-10 秒刷新一次页面，以便当 PHP 提供更新的数据时，框看起来会完全变化。

这里我尝试创建 3 个绿色背景的 div:http://jsfiddle.net/AAVT4/1/

这样我就可以将这 3 个 div 放入另一个大 div 中，并对这 3 个 div 进行高度百分比更改，但我无法正确使用 CSS。

HTML

</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>

CSS

<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>

Answer 1

这是解决您的问题的一个可能的解决方案 - 显示水:

fiddle :http://jsfiddle.net/AAVT4/3/

<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>

CSS

.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;
}