0

複数の垂直バーを更新するために、いくつかのhtmlとjavascriptを考え出そうとしています。次のようにして、1バーで動作させることができました。

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を参照する必要があります。誰でも助けることができますか？

4

2 に答える 2

1

これが動作中のデモ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">&nbsp;</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;   
}
于 2013-05-06T08:46:37.133 に答える
0 
/**
 * Returns a random number between min and max
 */
function getRandomArbitary (min, max) {
    return Math.random() * (max - min) + min;
}

特定の範囲でJavaScriptで乱数を生成するからコピーされた上記の関数 ?

var number_of_bars=30;

var mini=100;
var maxi=$(window).height();

for (var i=0; i<number_of_bars; i++) {
    $('#inner_'+ i).html('height:' + getRandomArbitary (mini,maxi ) + "px");
}

それが機能するように、高さはpx入らないほうがいいと思います%

于 2013-05-03T05:31:17.050 に答える