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>
posted @ 2012-10-07 22:57  张小三、  阅读(998)  评论(0)    收藏  举报