您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息

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

2024/3/29 17:41:20发布6次查看
实现功能如下:1.点击投票记录数据,下面的进度条也随之改变!
回复内容:
实现功能如下:1.点击投票记录数据,下面的进度条也随之改变!
这个点击有的时候,上边加1,点击否,否上边加1。进度条,分两部分吧,一开始两边都是50%,然后分别获取有和否的上面的个数,除以有和否之和,然后把小数点拼接转换成百分比,分别赋值给有和否所占的比例,最后再把算出比例所占的宽,赋值给有和否所占的宽。更新进度条。
首先需要用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); } }});
这个的思路是这样:
下面的进度条分为三个div:container div、blue div 、red div
也就是说点击投票时需要分别计算蓝红div的进度,加起来综合是100%。
用ajax吧,提交数据返回处理好的比例进行显示就ok了
具体实现你需要整理一下:
我先提供一个链接,
http://seiyria.com/bootstrap-slider/
可以参考一下:http://www.cnblogs.com/zxyun/
可以解决下面拖动条(禁用拖动事件)的显示问题,
然后上面和下面分两步处理,上面做数据操作,下面做数据显示,不同步操作!
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录