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>
  • 相关阅读:
    oracle实现自增id
    一些.NET 项目中经常使用的类库
    文件读取是判断是否读取到末尾
    文件操作
    第一个html文件
    HTML标签(持续更新)
    配置tomcat
    判断一个String中是否有指定字符或字符串
    去掉字符串中的某个字符
    把一个activity作为弹窗
  • 原文地址:https://www.cnblogs.com/xiaoyu5062/p/2714590.html
Copyright © 2011-2022 走看看