Chinaunix首页 | 论坛 | 博客
  • 博客访问: 394913
  • 博文数量: 25
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 125
  • 用 户 组: 普通用户
  • 注册时间: 2018-07-07 22:36
文章分类
文章存档

2020年(9)

2019年(14)

2018年(2)

我的朋友

分类: PHP

2020-02-10 09:45:20

PHP+Mysql实现网站顶和踩投票功能实例,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中。



首先我们在页面上放置“顶”和“踩”的按钮,即#dig_up和#dig_down,按钮上分别记录了投票的票数以及所占的百分比。
  1. <div class="digg">
  2.     <div id="dig_up" class="digup">
  3.         <span id="num_up"></span>
  4.         <p>很好,很强大!</p>
  5.         <div id="bar_up" class="bar"><span></span><i></i></div>
  6.     </div>
  7.        <div id="dig_down" class="digdown">
  8.         <span id="num_down"></span>
  9.         <p>太差劲了!</p>
  10.         <div id="bar_down" class="bar"><span></span><i></i></div>
  11.     </div>
  12.     <div id="msg"></div>
  13. </div>

  14. $(function(){
  15.     //当鼠标悬浮和离开两个按钮时,切换按钮背景样式
  16.     $("#dig_up").hover(function(){
  17.         $(this).addClass("digup_on");
  18.     },function(){
  19.         $(this).removeClass("digup_on");
  20.     });
  21.     $("#dig_down").hover(function(){
  22.         $(this).addClass("digdown_on");
  23.     },function(){
  24.         $(this).removeClass("digdown_on");
  25.     });
  26.      
  27.     //初始化数据
  28.     getdata("ajax.php",1);
  29.      
  30.     //单击“顶”时
  31.     $("#dig_up").click(function(){
  32.         getdata("ajax.php?action=like",1);
  33.     });
  34.     //单击“踩”时
  35.     $("#dig_down").click(function(){
  36.         getdata("ajax.php?action=unlike",1);
  37.     });
  38. });

函数getdata()
  1. function getdata(url,sid){
  2.     $.getJSON(url,{id:sid},function(data){
  3.         if(data.success==1){//投票成功
  4.             $("#num_up").html(data.like);
  5.             //通过控制宽度来显示百分比进度条效果
  6.             $("#bar_up span").css("width",data.like_percent);
  7.             $("#bar_up i").html(data.like_percent);
  8.             $("#num_down").html(data.unlike);
  9.             $("#bar_down span").css("width",data.unlike_percent);
  10.             $("#bar_down i").html(data.unlike_percent);
  11.         }else{//投票失败
  12.             $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'})
  13.             .animate({top:'-50px',opacity:0}, "slow");
  14.         }
  15.     });
  16. }

ajax.php
  1. $action = $_GET['action'];
  2. $id = 1;
  3. $ip = get_client_ip();//获取当前ip
  4.  
  5. if ($action == 'like') {
  6.     likes(1, $id, $ip);
  7. } elseif ($action == 'unlike') {
  8.     likes(0, $id, $ip);
  9. } else {
  10.     echo jsons($id);
  11. }

投票的表结构
  1. CREATE TABLE IF NOT EXISTS `votes` (
  2.   `id` int(10) NOT NULL AUTO_INCREMENT,
  3.   `likes` int(10) NOT NULL DEFAULT '0',
  4.   `unlikes` int(10) NOT NULL DEFAULT '0',
  5.   PRIMARY KEY (`id`)
  6. ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
  7.  
  8.  
  9. INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES
  10. (1, 30, 10);
  11.  
  12. CREATE TABLE IF NOT EXISTS `votes_ip` (
  13.   `id` int(11) NOT NULL AUTO_INCREMENT,
  14.   `vid` int(11) NOT NULL,
  15.   `ip` varchar(20) NOT NULL,
  16.   PRIMARY KEY (`id`)
  17. ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

本文转自: 转载请注明出处!
阅读(1690) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~