我試圖想出一些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。誰能幫忙？

來源

2013-05-03 Daz

可以請你加的jsfiddle？ – kailash19 2013-05-03 05:17:58

使用一個類而不是id將做的伎倆我想 – sakhunzai 2013-05-03 05:21:20

你想點擊更新吧？ – Mysteryos 2013-05-03 05:23:04

/** 
* Returns a random number between min and max 
*/ 
function getRandomArbitary (min, max) { 
    return Math.random() * (max - min) + min; 
}

上述功能從 Generating random whole numbers in JavaScript in a specific range?

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-03 05:31:17

沒有解決如何引用CSS的問題。 – Daz 2013-05-03 05:51:21

這裏的工作演示js-fiddle

JavaScript不是最佳選擇l，我剛剛複製了你的代碼。

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-06 08:46:37 sakhunzai

更新多個垂直條

回答

JS

HTML

CSS

相關問題