Question

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

我认为jsfiddle会有所帮助。

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

所以从本质上讲，我使用PHP进行一些后端计算，输出0到1000之间的值，表明现实生活中容器的完整性。 0表示容器是空的，1000表示容器完全充满水。

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

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

http://i.imgur.com/UyHa3rv.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

这是解决问题的可能方法 - 显示水：

小提琴：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;
}

用CSS绘制水容器

1 个答案: