ThinkPHP5+jQuery+MySql实现投票功能
ThinkPHP5+jQuery+MySql实现投票功能,先给大家展示下效果图,如果大家感觉效果不错,请参考实例代码。
效果图:
前端代码:
基于THINKPHP5实现红蓝投票功能 .vote{width:288px;height:300px;margin:40pxauto;position:relative} .votetitle{width:100%;height:62px;background:url(/static/index/images/icon.png)no-repeat030px;font-size:15px} .red{position:absolute;left:0;top:64px;height:80px;} .blue{position:absolute;right:0;top:64px;height:80px;} .redp,.bluep{line-height:22px} .redhand{position:absolute;left:0;width:36px;height:36px;background:url(/static/index/images/icon.png)no-repeat-1px-38px;cursor:pointer} .bluehand{position:absolute;right:0;width:36px;height:36px;background:url(/static/index/images/icon.png)no-repeat-41px-38px;cursor:pointer} .grayhand{width:34px;height:34px;background:url(/static/index/images/icon.png)no-repeat-83px-38px;cursor:pointer} .redbar{position:absolute;left:42px;margin-top:8px;} .bluebar{position:absolute;right:42px;margin-top:8px;} .redbarspan{display:block;height:6px;background:red;width:100%;border-radius:4px;} .bluebarspan{display:block;height:6px;background:#09f;width:100%;border-radius:4px;position:absolute;right:0} .redbarp{line-height:20px;color:red;} .bluebarp{line-height:20px;color:#09f;text-align:right;margin-top:6px} $(function(){ //获取初始数据 getdata('',1); $(".redhand").click(function(){ getdata("red",1); }); $(".bluehand").click(function(){ getdata("blue",1); }); }); functiongetdata(type,vid){ $.ajax({ url:"{:url('/index/vote/vote')}", data:{type:type,vid:vid}, type:'POST', dataType:'json', success:function(res){ console.log(res) if(res.status==0){ alert('投票成功') varw=208; $("#red_num").html(res.msg.rednum); $("#red").css("width",res.msg.red_percent*100+"%"); varred_bar_w=w*res.msg.red_percent-10; $("#red_bar").css("width",red_bar_w); $("#blue_num").html(res.msg.bluenum); $("#blue").css("width",res.msg.blue_percent*100+"%"); varblue_bar_w=w*res.msg.blue_percent; $("#blue_bar").css("width",blue_bar_w); }else{ alert('投票失败'); } } }); } ThinkPHP5+jQuery+MySql实现红蓝投票功能 您对Thinkphp5的看法?
非常实用