ThinkPHP5+jQuery+MySql實現投票功能，先給大家展示下效果圖，如果大家感覺效果不錯，請參考實例代碼。
效果圖：
前端代碼：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>基于THINKPHP5實現紅藍投票功能</title><style type="text/css"> .vote{width:288px; height:300px; margin:40px auto;position:relative} .votetitle{width:100%;height:62px; background:url(/static/index/images/icon.png) no-repeat 0 30px; font-size:15px} .red{position:absolute; left:0; top:64px; height:80px;} .blue{position:absolute; right:0; top:64px; height:80px;} .red p,.blue p{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; } .redbar span{display:block; height:6px; background:red; width:100%;border-radius:4px;} .bluebar span{display:block; height:6px; background:#09f; width:100%;border-radius:4px; position:absolute; right:0} .redbar p{line-height:20px; color:red;} .bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px}</style><script type="text/javascript" src="/static/index/js/jquery.js"></script><script type="text/javascript">$(function(){ // 獲取初始數據 getdata('',1); $(".redhand").click(function(){ getdata("red",1); }); $(".bluehand").click(function(){ getdata("blue",1); });});function getdata(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('投票成功') var w = 208; $("#red_num").html(res.msg.rednum); $("#red").css("width",res.msg.red_percent*100+"%"); var red_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+"%"); var blue_bar_w = w*res.msg.blue_percent; $("#blue_bar").css("width",blue_bar_w); }else{ alert('投票失敗'); } } });}</script></head><body><div > <h2 class="top_title"><a >ThinkPHP5+jQuery+MySql實現紅藍投票功能</a></h2> <div class="vote"> <div class="votetitle">您對Thinkphp5的看法？</div> <div class="red" > <p>非常實用</p> <div class="redhand"></div> <div class="redbar" > <span></span> <p ></p> </div> </div> <div class="blue" > <p >完全不懂</p> <div class="bluehand"></div> <div class="bluebar" > <span></span> <p ></p> </div> </div> </div></div></body></html>
新聞熱點
疑難解答
