JQuery随机生成动态竖状条投票结果
生活中很多地方都能看到竖状的投票结果条，会不断的增长到票数，比如电视上的即时投票，多一票就涨高一点，那么这个效果怎么实现呢，现在就来演示一下吧。
代码如下：
注：需引用JQuery1.7.2，如没有的话直接百度一下就OK了。
<html>
<head>
<title>竖状条</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
for (i = 0; i < 4; i++) {
var temp = "<div><div style='background:red;float:left;width:30px;height:300px'> <div id='d' style='background:white;float:left;width:30px;height:290px'></div></div></div><div style= 'background:white;float:left;width:20px;height:300px'></div></div>";
$("body").after(temp);
$('#d').attr("id", 'd' + i);
}
});
function Start() {
for (i = 0; i < 4; i++) {
Move('d' + i, Math.random()*300);
}
}
function Move(id, howlong) {
v = document.getElementById(id);
h = parseInt(v.style.height);
h -= 5;
v.style.height = h.toString() + "px";
v.innerText =eval(300- h)+ "票";
if (h >howlong) { setTimeout(function () { Move(id, howlong); }, 20) }
}
</script>
</head>
<body>
<input type="Button" id="StartMove" onclick="Start()" value="随机生成投票结果" />
</body>
</html>
