ThinkPHP5+jQuery+MySql實現投票功能，先給大家展示下效果圖，如果大家感覺效果不錯，請參考實例代碼。
效果圖：
前端代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!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 id="main"> <h2 class="top_title"><a href="//m.ythuaji.com.cn/article/71504.htm">ThinkPHP5+jQuery+MySql實現紅藍投票功能</a></h2> <div class="vote"> <div class="votetitle">您對Thinkphp5的看法？</div> <div class="red" id="red"> <p>非常實用</p> <div class="redhand"></div> <div class="redbar" id="red_bar"> <span></span> <p id="red_num"></p> </div> </div> <div class="blue" id="blue"> <p style="text-align:right">完全不懂</p> <div class="bluehand"></div> <div class="bluebar" id="blue_bar"> <span></span> <p id="blue_num"></p> </div> </div> </div></div></body></html> |
控制器：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<?phpnamespace app\index\controller;use think\Controller;/** * 投票 */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; }} |
模型：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<?phpnamespace app\index\model;use think\Model;use think\Db;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; }} |
總結
以上所述是小編給大家介紹的ThinkPHP5+jQuery+MySql實現投票功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
原文鏈接：https://www.cnblogs.com/zxf100/p/12201006.html
