本文实例为大家分享了基于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程序设计有所帮助。