Home >Backend Development >PHP Tutorial >javascript - 实现如下图的投票功能

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

WBOY
WBOYOriginal
2016-06-06 20:15:591353browse

javascript - 实现如下图的投票功能
实现功能如下:1.点击投票记录数据,下面的进度条也随之改变!

回复内容:

javascript - 实现如下图的投票功能
实现功能如下:1.点击投票记录数据,下面的进度条也随之改变!

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

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

jq下:

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

没测试 大意是这样

<code>$.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);
        }
    }
});
</code>

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

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn