生活中很多地方都能看到竖状的投票结果条,会不断的增长到票数,比如电视上的即时投票,多一票就涨高一点,那么这个效果怎么实现呢,现在就来演示一下吧。
代码如下:
注:需引用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;30px;height:300px'> <div id='d' style='background:white;float:left;30px;height:290px'></div></div></div><div style= 'background:white;float:left;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>