javascript - 实现如下图的投票功能

Question

实现功能如下：1.点击投票记录数据，下面的进度条也随之改变！

Answer 1

这个点击有的时候，上边加1，点击否，否上边加1。进度条，分两部分吧，一开始两边都是50%，然后分别获取有和否的上面的个数，除以有和否之和，然后把小数点拼接转换成百分比，分别赋值给有和否所占的比例，最后再把算出比例所占的宽，赋值给有和否所占的宽。更新进度条。

Answer 2

首先需要用Ajax像后台php提交投票 成功失败返回提示

jq下：

在Ajax中 success 中对进度条进行操作 如果是用宽度控制 直接修改两侧的百分比然后调整宽度

没测试 大意是这样

$.ajax({
    url:"url",
    dataType:"json",
    type:'POST',
    data:{
        'vote': 'red',
        'user': 1
    },
    success: function(data) {
        if(data['err'] == 1){
            alert('repeat err');
        }else{
            $('#ProgressRed').css({"width":data['score']});
            $('#ProgressBlue').css({"width":100 - data['score']});
        }
    },
    error: function(x) {
        if (console) {
            console.log(x);
        }
    }
});

Answer 3

这个的思路是这样：
下面的进度条分为三个p：container p、blue p 、red p
也就是说点击投票时需要分别计算蓝红p的进度，加起来综合是100%。

Answer 4

用ajax吧，提交数据返回处理好的比例进行显示就ok了

Answer 5

具体实现你需要整理一下：
我先提供一个链接，
http://seiyria.com/bootstrap-slider/
可以参考一下：http://www.cnblogs.com/zxyun/
可以解决下面拖动条（禁用拖动事件）的显示问题，
然后上面和下面分两步处理，上面做数据操作，下面做数据显示，不同步操作！