一个简单的js投票柱状百分比特效

最新推荐文章于 2021-06-28 20:26:22 发布

boolean2011

最新推荐文章于 2021-06-28 20:26:22 发布

阅读量1.1k

点赞数

文章标签： input function div button xhtml class

本文链接：https://blog.csdn.net/boolean2011/article/details/7192415

版权

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{ margin:0; padding:0;}
    #div1{ background:#000; width:500px; height:30px; position:relative;}
    .a_1, .a_2{ position:absolute; top:0; height:30px;}
    .a_1{ left:0; background:#0F6;}
    .a_2{ right:0; background:#39C;}
    input{ margin-top:30px;}
    </style>
    <script>
    window.οnlοad=function()
    {
            var oDiv=document.getElementById('div1');
            var aDiv=oDiv.getElementsByTagName('div');
            var aBtn=document.getElementsByTagName('input');
            var lNum=50;
            var rNum=25;
            var lNums=(rNum/(lNum+rNum))*500;
            var rNums=500-lNums;
            aDiv[1].style.width=parseInt(lNums)+'px';
            aDiv[0].style.width=500-parseInt(lNums)+'px';
            aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);
            aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);

            aBtn[0].οnclick=function()
            {
                    lNum=lNum+1;
                    var lNumss=parseInt(lNum/(lNum+rNum)*500);
                    aDiv[0].style.width=lNumss+'px';
                    aDiv[1].style.width=(500-lNumss)+'px';
                    aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);
                    aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);
            }
            aBtn[1].οnclick=function()
            {
                    rNum=rNum+1;
                    var rNumss=parseInt(rNum/(lNum+rNum)*500);
                    aDiv[0].style.width=(500-rNumss)+'px';
                    aDiv[1].style.width=rNumss+'px';
                    aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);
                    aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);
            }
    }
    </script>
    </head>

    <body>
    <div id="div1">
            <div class="a_1"></div>
        <div class="a_2"></div>
    </div>
    <input type="button" name="aa" value="投票1" />
    <input type="button" name="aa" value="投票2" />
    </body>
    </html>