下面由thinkphp教程欄目給給大家介紹thinkphp5+jquery+mysql實現投票功能的方法,希望對需要的朋友也是幫助!
首先效果圖如下:
然后分享代碼如下:
前端代碼:
立即學習“PHP免費學習筆記(深入)”;
nbsp;HTML> <meta><title>基于THINKPHP5實現紅藍投票功能</title><style> .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></script><script> $(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><div> ???<h2><a>ThinkPHP5+jQuery+mysql實現紅藍投票功能</a></h2> ???<div> ????????<div>您對Thinkphp5的看法?</div> ????????<div> ????????????<p>非常實用</p> ????????????<div></div> ????????????<div> ????????????????<span></span> ????????????????<p></p> ????????????</div> ????????</div> ????????<div> ????????????<p>完全不懂</p> ????????????<div></div> ????????????<div> ????????????????<span></span> ????????????????<p></p> ????????????</div> ????????</div> ???</div> </div>
控制器:
<?php namespace appindexcontroller; use thinkController; /** * 投票 */ class Vote extends Controller { /** * 首頁 */ public function index() { return $this->fetch(); ????} ????/** ?????*?投票 ?????*?@param?vid?type?ip ?????*/ ????public?function?Vote() ????{ ????????$data?=?input('post.'); ????????if?(!empty($data))?{ ????????????$data['ip']?=?get_ip();????//獲取Ip ????????????//?先檢測當前ip是否已經投過票 ????????????$count?=?model('Vote')->checkIp($data); ????????????//?檢測是否提交了type,提交了即代表點擊了按鈕,沒提交即代表頁面初次渲染 ????????????if?(!empty($data['type']))?{ ????????????????if?($count?==?'0')?{????//當前還未投過票? ????????????????????//?更新票數??添加用戶ip表 ????????????????????$res?=?model('Vote')->postVote($data); ????????????????????if?($res)?{ ???????????????????????? ????????????????????????//?投票成功??獲取當前各自的票數 ????????????????????????$info?=?$this->getPercent($data); ????????????????????????return?return_succ($info); ????????????????????}else{ ????????????????????????return?return_error('投票失敗'); ????????????????????} ????????????????}else{ ????????????????????//?已經投過票 ????????????????????return?return_error('您已經投過票了'); ????????????????} ????????????}else{ ????????????????//?初次渲染,獲取初始數據 ????????????????$info?=?$this->getPercent($data); ????????????????return?return_succ($info); ????????????} ????????}else{ ????????????return?return_error('數據不能為空'); ????????} ????} ????//?計算比例 ????public?function?getPercent($data) ????{ ????????//?投票成功??獲取當前各自的票數 ????????$info?=?model('Vote')->getInfo($data); ????????//?計算比例?保留3位小數 ????????$info['red_percent']?=?round($info['rednum']?/?($info['rednum']?+?$info['bluenum']),3); ????????$info['blue_percent']?=?1?-?$info['red_percent']; ????????return?$info; ????} }
模型:
<?php namespace appindexmodel; use thinkModel; use thinkDb; class Vote extends Model { // 檢測當前ip是否已經投過票 public function checkIp($data) { $res = Db::table('votes_ip')->where(['vid'=>$data['vid'],'ip'=>$data['ip']])->count(); ????????return?$res; ????} ????//?投票 ????public?function?postVote($data) ????{ ????????$info?=?$this->getInfo($data); ????????if?($info)?{ ????????????Db::startTrans(); ????????????try?{ ???????????????? ????????????????if?($data['type']?==?"red")?{ ????????????????????//?更新票數表?? ????????????????????Db::table('votes')->where(['id'=>$data['vid']])->update(['rednum'=>$info['rednum']+1]); ????????????????}elseif?($data['type']?==?"blue")?{ ????????????????????Db::table('votes')->where(['id'=>$data['vid']])->update(['bluenum'=>$info['bluenum']+1]); ????????????????} ????????????????//?添加用戶投票ip ????????????????Db::table('votes_ip')->insert(['vid'=>$data['vid'],'ip'=>$data['ip']]); ????????????????Db::commit(); ????????????????return?true; ????????????}?catch?(Exception?$e)?{ ????????????????Db::rollback(); ????????????????return?false; ????????????} ????????} ????} ????//?獲取當前各自的票數 ????public?function?getInfo($data) ????{ ????????//?獲取各自的票數 ????????$info?=?Db::table('votes')->where(['id'=>$data['vid']])->find(); ????????return?$info; ????} }
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END