一个简单的js投票柱状百分比特效-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20258 次

以下是程序代码

<!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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>