本文实例为大家分享了基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码,供大家参考,具体内容如下
数据库操作:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
CREATE TABLE IF NOT EXISTS `votes` ( `id` int (10) NOT NULL AUTO_INCREMENT, `likes` int (10) NOT NULL DEFAULT '0' , `unlikes` int (10) NOT NULL DEFAULT '0' , PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES (1, 30, 10); CREATE TABLE IF NOT EXISTS `votes_ip` ( `id` int (10) NOT NULL , `vid` int (10) NOT NULL , `ip` varchar (40) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; |
div:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
< div class = "digg" > < div id = "dig_up" class = "digup" > < span id = "num_up" ></ span > < p >很好,很强大!</ p > < div id = "bar_up" class = "bar" >< span ></ span >< i ></ i ></ div > </ div > < div id = "dig_down" class = "digdown" > < span id = "num_down" ></ span > < p >太差劲了!</ p > < div id = "bar_down" class = "bar" >< span ></ span >< i ></ i ></ div > </ div > < div id = "msg" ></ div > </ div > |
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.digg{ width : 420px ; height : 120px ; margin : 80px auto 20px auto ; position : relative } #dig_up,#dig_down{ width : 200px ; height : 48px ; margin : 10px ; position : relative ; border : 1px solid #d3d3d3 ; padding-left : 42px ; cursor : pointer } .digup{ background : url (diggs.png) no-repeat 4px 2px ;} .digup_on{ background : url (diggs.png) no-repeat 4px -49px ;} .digdown{ background : url (diggs.png) no-repeat 4px -102px ;} .digdown_on{ background : url (diggs.png) no-repeat 4px -154px ;} #num_up,#num_down{ position : absolute ; right : 6px ; top : 18px ; font-size : 20px ;} #dig_up p{ height : 24px ; line-height : 24px ; color : #360 } #dig_down p{ height : 24px ; line-height : 24px ; color : #f30 } .bar{ width : 100px ; height : 12px ; line-height : 12px ; border : 1px solid #f0f0f0 ; position : relative ; text-align : center } .bar span{ display : block ; height : 12px ; } .bar i{ position : absolute ; top : 0 ; left : 104px ;} #bar_up span{ background : #360 } #bar_down span{ background : #f60 } #msg{ position : absolute ; right : 20px ; top : 40px ; font-size : 18px ; color : #f00 } |
jquery:
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
|
$( function (){ //鼠标滑向和离开投票按钮时,变换背景样式 $( "#dig_up" ).hover( function (){ $( this ).addClass( "digup_on" ); }, function (){ $( this ).removeClass( "digup_on" ); }); $( "#dig_down" ).hover( function (){ $( this ).addClass( "digdown_on" ); }, function (){ $( this ).removeClass( "digdown_on" ); }); //初始化数据 getdata( "do.php" ,1); //单击“顶”时 $( "#dig_up" ).click( function (){ getdata( "do.php?action=like" ,1); }); //单击“踩”时 $( "#dig_down" ).click( function (){ getdata( "do.php?action=unlike" ,1); }); }); --------------------------------------- function getdata(url,sid){ $.getJSON(url,{id:sid}, function (data){ if (data.success==1){ //投票成功 $( "#num_up" ).html(data.like); //通过控制宽度来显示百分比进度条效果 $( "#bar_up span" ).css( "width" ,data.like_percent); $( "#bar_up i" ).html(data.like_percent); $( "#num_down" ).html(data.unlike); $( "#bar_down span" ).css( "width" ,data.unlike_percent); $( "#bar_down i" ).html(data.unlike_percent); } else { //投票失败 $( "#msg" ).html(data.msg).show().css({ 'opacity' :1, 'top' : '40px' }) .animate({top: '-50px' ,opacity:0}, "slow" ); } }); } |
php:
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
|
include_once ( "connect.php" ); //连接数据库 $action = $_GET [ 'action' ]; $id = 1; $ip = get_client_ip(); //获取ip if ( $action == 'like' ){ //顶 likes(1, $id , $ip ); } elseif ( $action == 'unlike' ){ //踩 likes(0, $id , $ip ); } else { echo jsons( $id ); } ------------------------------------ function likes( $type , $id , $ip ){ $ip_sql =mysql_query( "select ip from votes_ip where vid='$id' and ip='$ip'" ); $count =mysql_num_rows( $ip_sql ); if ( $count ==0){ //还没有顶过 if ( $type ==1){ //顶 $sql = "update votes set likes=likes+1 where id=" . $id ; } else { //踩 $sql = "update votes set unlikes=unlikes+1 where id=" . $id ; } mysql_query( $sql ); $sql_in = "insert into votes_ip (vid,ip) values ('$id','$ip')" ; mysql_query( $sql_in ); if (mysql_insert_id()>0){ echo jsons( $id ); } else { $arr [ 'success' ] = 0; $arr [ 'msg' ] = '操作失败,请重试' ; echo json_encode( $arr ); } } else { $msg = $type ==1? '您已经顶过了' : '您已经踩过了' ; $arr [ 'success' ] = 0; $arr [ 'msg' ] = $msg ; echo json_encode( $arr ); } } -----------php------------------------- function jsons( $id ){ $query = mysql_query( "select * from votes where id=" . $id ); $row = mysql_fetch_array( $query ); $like = $row [ 'likes' ]; $unlike = $row [ 'unlikes' ]; $arr [ 'success' ]=1; $arr [ 'like' ] = $like ; $arr [ 'unlike' ] = $unlike ; $like_percent = round ( $like /( $like + $unlike ),3)*100; $arr [ 'like_percent' ] = $like_percent . '%' ; $arr [ 'unlike_percent' ] = (100- $like_percent ). '%' ; return json_encode( $arr ); } |
以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。