条形图投票demo

//老师上课布置的作业，细节问题有点多。

思路：用两个div盒子填充背景颜色，利用margin调整位置使其一上一下覆盖。在两个div各写入小数，0.50和0.50以便进行绑定。思考的时候原本以为会用到z-index来调整大小，结果空操心。

遇见问题：

1.JS设置绑定事件时出现问题，小数能发生变化但是变化规律为 1 2 3 4 5...与原先打算每次点击按钮加1不一致，后来查阅资料发现是因为每次点击按钮绑定事件并未解绑，导致累加。搜索后发现只有Jq有解决方法，但还未了解太深入遂放弃。

2.点击按钮第一次无反应，第二次才有反应。经查阅资料发现第一次点击只是为按钮添加了事件监听器，第二次点击开始才是运行事件。

3.浏览器出现Can't set property 'onclick' of null,原因为将js放在head中，同时绑定了onclick。dom0级事件处理程序要在按钮加载完毕之后才能使用。所以应放在后面靠近</body>处

4.浮点数直接相加，运算结果不精确。原因是js浮点运算是转化为2进制进行运算这里出现了第一次的误差，然后又从2进制转化为10进制的结果，这里是第二次误差。javascript是一门弱类型的语言并不像c++/java一样已经有封装的函数来避免这个问题。

方法一：指定要保留的小数位数(0.1+0.2).toFixed(1) = 0.3;这个方法toFixed是进行四舍五入的也不是很精准，不同浏览器对toFixed的计算结果存在差异。

方法二：把需要计算的数字升级（乘以10的n次幂）成计算机能够精确识别的整数，等计算完毕再降级（除以10的n次幂），这是大部分编程语言处理精度差异的通用方法。

5.用事件绑定css时，无法使用object.style.property指定外联样式表中的width。经过很多测试都失败了，后来查阅资料发现，这种方法以及getattribute、setattribute只能得到事先已经经过js设置的css样式值，或者直接在dom里面设置的内联式css值。我原本采用的是外部式css表，结果每次得到都是空值。（这里是个重点，难点）

html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Title</title>
    <link href="vote.css" rel="stylesheet" type="text/css">

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="Vote">
    <div id="graph1" style="width:300px">0.50</div>
    <div id="graph2" style="width:150px">0.50</div>
    <input type="button"  id="btn1" value="投票1">
<input type="button"  id="btn2" value="投票2">
</div>
<script src="vote.js" type="text/javascript"></script>
</body>
</html>

css代码如下：

* {
    margin:0;
    padding:0;
}
.Vote{
    width:200px;
    height:30px;
  ;
}

.Vote #graph1{
    background-color: #90ff11;
    width:300px;
    height:30px;
    text-align: right;
}

.Vote #graph2{
    background-color:yellow;
    width:150px;
    height:30px;
    text-align:left;
    margin-top:-30px;
}

JS代码如下：

    var bn2 =document.getElementById("btn2");
    var bn1=document.getElementById("btn1");
    var gra2 =document.getElementById("graph2");
    var gra1=document.getElementById("graph1");
    var num1=0.5;
    var num2=0.5;
    var num3 = 0.01;
    var i=0;
        bn2.onclick=function() {
            i+=1;
            num1 = gra2.innerText;
            num1 = parseFloat(num1);
            gra2.innerText = (num1 + num3).toFixed(2);

            num2 = gra1.innerText;
            num2 = parseFloat(num2);
            gra1.innerText = (num2 - num3).toFixed(2);
            alert(gra2.style.width);
            gra2.style.width =parseInt(gra2.style.width)+3+"px";
        };
        bn1.onclick=function () {
            i += 1;
            num1 = gra2.innerText;
            num1 = parseFloat(num1);
            gra2.innerText = (num1 - num3).toFixed(2);

            num2 = gra1.innerText;
            num2 = parseFloat(num2);
            gra1.innerText = (num2 + num3).toFixed(2)


            gra2.style.width =parseFloat(gra2.style.width)-3+"px";

        };

作者：RollingJKX 2018年4月7日凌晨12点59分

秒客网

条形图投票demo

相关文章