我正试图想出一些 html 和 javascript 来更新多个垂直条。我已经能够通过以下方式让它工作 1 bar:
JavaScript
$('#inner').animate({height: + Math.floor(Math.random()*100) + "%"},500);
CSS
#outer {
width: 15px;
height: 140px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
}
#inner, #inner div {
width: 100%;
overflow: hidden;
left: -2px;
position: absolute;
}
#inner {
border: 2px solid #000;
border-top-width: 0;
background-color: #090;
bottom: 0;
height: 0%;
}
#inner div {
border: 1px solid red;
border-bottom-width: 0;
background-color: orange;
top: 0;
width: 100%;
height: 5px;
}
html
<div id="outer>
<div id="inner">
<div>height:'0%'</div>
</div>
</div>
我想做的是用类似的东西更新多个条形图:
JavaScript
var number_of_bars=30;
for (var i=0; i<number_of_bars; i++) {
$('#inner_'+ i).html('height:' + Math.floor(Math.random()*100) + "%");
}
但我需要让它引用特定的个人 div。谁能帮忙?
最佳答案
这是工作演示 js-fiddle
javascript 不是最优的,我刚刚复制了你的代码。
js
function reload(){
$('.inner').each(function(){
$(this).animate({
height: +Math.floor(Math.random() * 100) + "%"
}, 500);
});
};
setInterval(reload, 1000);
html
<ul id="outer">
<li style="height:100%;width:1px"> </li>
<li class="inner">
<div>height:'0%'</div>
</li>
<li class="inner">
<div>height:'0%'</div>
</li>
<li class="inner">
<div>height:'0%'</div>
</li>
<li class="inner">
<div>height:'0%'</div>
</li>
<li class="inner">
<div>height:'0%'</div>
</li>
<li class="inner">
<div>height:'0%'</div>
</li>
<li class="inner">
<div>height:'0%'</div>
</li>
</ul>
CSS
#outer {
border: 2px solid #CCCCCC;
height: 140px;
overflow: hidden;
padding: 0;
position: relative;
}
#outer li {
border: 1px solid lightgray;
display: inline-block;
height: 99%;
overflow: hidden;
position: inherit;
width: 15px;
background-color:green;
}
#outer li div{
bottom: 0;
height: 0px;
position: absolute;
}
关于javascript - 更新多个垂直条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16352051/