基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码


Posted in PHP onAugust 25, 2015

先给大家展示效果图:

基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码

查看演示 下载源码

这是一个非常实用的投票实例,应用在双方观点对抗投票场景。用户可以选择支持代表自己观点的一方进行投票,本文以红蓝双方投票为例,通过前后台交互,直观展示红蓝双方投票数和所占比例,应用非常广泛。

本文是一篇综合知识应用类文章,需要您具备PHP、jQuery、MySQL以及html和css方面的基本知识。

HTML

我们需要在页面中展示红蓝双方的观点,以及对应的投票数和比例,以及用于投票交互的手型图片,本例以#red和#blue分别表示红蓝双方。.redhand和.bluehand用来做手型投票按钮,.redbar和.bluebar展示红蓝双方比例调,#red_num和#blue_num展示双方投票数。

<div class="vote"> 
 <div class="votetitle">您对Helloweba提供的文章的看法?</div> 
 <div class="votetxt">非常实用<span>完全看不懂</span></div> 
 <div class="red" id="red"> 
 <div class="redhand"></div> 
 <div class="redbar" id="red_bar"> 
  <span></span> 
  <p id="red_num"></p> 
 </div> 
 </div> 
 <div class="blue" id="blue"> 
 <div class="bluehand"></div> 
 <div class="bluebar" id="blue_bar"> 
  <span></span> 
  <p id="blue_num"></p> 
 </div> 
 </div> 
</div>

CSS

使用CSS将页面美化,加载背景图片,确定相对位置等等,你可以直接复制以下代码,在自己的项目中稍作修改即可。

.vote{width:288px; height:220px; margin:60px auto 20px auto;position:relative} 
.votetitle{width:100%;height:62px; background:url(icon.png) no-repeat 0 30px; font-size:15px} 
.red{position:absolute; left:0; top:90px; height:80px;} 
.blue{position:absolute; right:0; top:90px; height:80px;} 
.votetxt{line-height:24px} 
.votetxt span{float:right} 
.redhand{position:absolute; left:0;width:36px; height:36px; background:url(icon.png) no-repeat -1px -38px;cursor:pointer} 
.bluehand{position:absolute; right:0;width:36px; height:36px; background:url(icon.png) no-repeat -41px -38px;cursor:pointer} 
.grayhand{width:34px; height:34px; background:url(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}

jQuery

当点击手型按钮时,利用jQuery的$.getJSON()向后台php发送Ajax请求,如果请求成功,将会得到后台返回的json数据,jQuery再将json数据进行处理。以下函数:getdata(url,sid),传递了两个参数,url是请求的后台php地址,sid表示当前投票主题ID,我们在该函数中,返回的json数据有红蓝双方的投票数,以及双方比例,根据比例计算比例条的宽度,异步交互展示投票效果。

function getdata(url,sid){ 
 $.getJSON(url,{id:sid},function(data){ 
 if(data.success==1){ 
  var w = 208; //定义比例条的总宽度 
  //红方投票数 
  $("#red_num").html(data.red); 
  $("#red").css("width",data.red_percent*100+"%"); 
  var red_bar_w = w*data.red_percent-10; 
  //红方比例条宽度 
  $("#red_bar").css("width",red_bar_w); 
  //蓝方投票数 
  $("#blue_num").html(data.blue); 
  $("#blue").css("width",data.blue_percent*100+"%"); 
  var blue_bar_w = w*data.blue_percent; 
  //蓝方比例条宽度 
  $("#blue_bar").css("width",blue_bar_w); 
 }else{ 
  alert(data.msg); 
 } 
 }); 
}

当页面初次加载时,即调用getdata(),然后点击给红方投票或给蓝方投票同样调用getdata(),只是传递的参数不一样。注意本例中的参数sid我们设置为1,是根据数据表中的id设定的,开发者可以根据实际项目读取准确的id。

$(function(){ 
 //获取初始数据 
 getdata("vote.php",1); 
 //红方投票 
 $(".redhand").click(function(){ 
 getdata("vote.php?action=red",1); 
 }); 
 //蓝方投票 
 $(".bluehand").click(function(){ 
 getdata("vote.php?action=blue",1); 
 }); 
});

PHP

前端请求了后台的vote.php,vote.php将根据接收的参数,连接数据库,调用相关函数。

include_once("connect.php"); 

$action = $_GET['action']; 
$id = intval($_GET['id']); 
$ip = get_client_ip();//获取ip 

if($action=='red'){//红方投票 
vote(1,$id,$ip); 
}elseif($action=='blue'){//蓝方投票 
vote(0,$id,$ip); 
}else{//默认返回初始数据 
echo jsons($id); 
}

函数vote($type,$id,$ip)用来做出投票动作,$type表示投票方,$id表示投票主题的id,$ip表示用户当前ip。首先根据用户当前IP,查询投票记录表votes_ip中是否已经存在当前ip记录,如果存在,则说明用户已投票,否则更新红方或蓝方的投票数,并将当前用户投票记录写入到votes_ip表中以防重复投票。

function vote($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{ 
 $arr['success'] = 0; 
 $arr['msg'] = '已经投票过了'; 
 echo json_encode($arr); 
 } 
}

函数jsons($id)通过查询当前id的投票数,计算比例并返回json数据格式供前端调用。

function jsons($id){ 
 $query = mysql_query("select * from votes where id=".$id); 
 $row = mysql_fetch_array($query); 
 $red = $row['likes']; 
 $blue = $row['unlikes']; 
 $arr['success']=1; 
 $arr['red'] = $red; 
 $arr['blue'] = $blue; 
 $red_percent = round($red/($red+$blue),3); 
 $arr['red_percent'] = $red_percent; 
 $arr['blue_percent'] = 1-$red_percent; 
 
 return json_encode($arr); 
}

文中还涉及到获取用户真实IP的函数:get_client_ip(),点击这里可以看相关代码:https://3water.com/article/58610.htm

MySQL

最后,贴上Mysql数据表,votes表用来记录红蓝双方的投票总数,votes_ip表则用来存放用户的投票IP记录。

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;

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

本文结合实例,讲解使用PHP+MySql+jQuery实现的“顶”和“踩”投票功能,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中。

基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码

首先我们在页面上放置“顶”和“踩”的按钮,即#dig_up和#dig_down,按钮上分别记录了投票的票数以及所占的百分比。

<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>
$(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("ajax.php",1); 
 //单击“顶”时 
 $("#dig_up").click(function(){ 
 getdata("ajax.php?action=like",1); 
 }); 
 //单击“踩”时 
 $("#dig_down").click(function(){ 
 getdata("ajax.php?action=unlike",1); 
 }); 
});

以上内容实现了基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码,希望大家喜欢。

PHP 相关文章推荐
PHP新手上路(十二)
Oct 09 PHP
ThinkPHP与PHPExcel冲突解决方法
Aug 08 PHP
PHP函数篇之掌握ord()与chr()函数应用
Dec 05 PHP
ajax在joomla中的原生态应用代码
Jul 19 PHP
基于PHP静态类的原罪详解
May 06 PHP
PHP图片裁剪函数(保持图像不变形)
May 04 PHP
destoon整合ucenter后注册页面不跳转的解决方法
Jun 21 PHP
php生成html文件方法总结
Dec 01 PHP
php数组去除空值函数分享
Feb 02 PHP
php单例模式示例分享
Feb 12 PHP
PHP封装的page分页类定义与用法完整示例
Dec 24 PHP
关于laravel 子查询 &amp; join的使用
Oct 16 PHP
百度地图API使用方法详解
Aug 25 #PHP
PHP实现生成唯一会员卡号
Aug 24 #PHP
PHP实现微信发红包程序
Aug 24 #PHP
php 利用socket发送HTTP请求(GET,POST)
Aug 24 #PHP
php实现递归的三种基本方式
Jul 04 #PHP
php析构函数的简单使用说明
Aug 24 #PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
Aug 23 #PHP
You might like
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
php实现json编码的方法
2015/07/30 PHP
php代码架构的八点注意事项
2016/01/25 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
详解vue组件基础
2018/05/04 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python私有属性和方法实例分析
2015/01/15 Python
python使用pil生成缩略图的方法
2015/03/26 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python安装twisted的问题解析
2018/08/21 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL