个人中心
gpt4 book ai didi

PHP+MySql+jQuery实现的＂顶＂和＂踩＂投票功能

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章PHP+MySql+jQuery实现的＂顶＂和＂踩＂投票功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

最后此篇关于PHP+MySql+jQuery实现的＂顶＂和＂踩＂投票功能的文章就讲到这里了,如果你想了解更多关于PHP+MySql+jQuery实现的＂顶＂和＂踩＂投票功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
文章推荐： Java 创建线程的3种方法及各自的优点
文章推荐： 用VBS来代替BAT或CMD文件进行命令
文章推荐： PHP框架Laravel插件Pagination实现自定义分页
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com