zoukankan      html  css  js  c++  java
  • 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;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>
  • 相关阅读:
    Autofac(01)
    深入理解ADO.NET Entity Framework(02)
    使用excel 数据透视表画图
    C# 控制CH341进行SPI,I2C读写
    C# winform使用combobox遍历文件夹内所有文件
    通用分页存储过程
    如何让你的SQL运行得更快
    sql优化之使用索引
    SQL优化
    SQL 循环语句几种写法
  • 原文地址:https://www.cnblogs.com/xiaoyu5062/p/2714590.html
Copyright © 2011-2022 走看看