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

稿源：互联网 2022-04-02 21:38:20 点击： 8640 撤稿纠错

无聊弄的一个简单的js投票，这个是投票的js，所以一个加一个减

以下讨论的是和投票柱状百分比相关的一个简单的js投票柱状百分比特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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.onload=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].onclick=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].onclick=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>

关于一个简单的js投票柱状百分比特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011110876052.shtml方便下次再访问哦。

·上一篇： 由下自上不断上升冒气泡的js特效代码
·下一篇： js获取数字字符串的长度并在特定长度位置加入空格

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

文章分类LIST >>返回首页

最新游戏

最新新闻