让我先给你看效果图：

查看演示下载源代码

这是一个非常实用的投票例子，应用在双方观点相左的投票场景中。用户可以选择支持自己观点的一方进行投票。本文以红蓝党投票为例，通过后台交互直观展示红蓝党的投票人数和比例，应用广泛。

本文是一篇综合性的知识应用文章，要求你具备PHP、jQuery、MySQL、html和css的基础知识。

超文本标记语言

我们需要展示红蓝双方的观点，对应的票数和比例，以及投票互动所用的手图。在这个例子中，#红色和#蓝色分别代表红色和蓝色。雷德汉德和。bluehand被用作手持投票按钮。红吧和。bluebar显示红色和蓝色的比例，#red_num和#blue_num显示两党的投票人数。

你觉得Helloeb A提供的文章怎么样？/div div class=' votext '非常实用，span完全无法理解/span/div class=' red ' id=' red ' div class=' red hand '/div class=' redbar ' id=' red _ bar ' span/span p id=' red _ num '/p/div/div class=' blue ' id=' blue hand '/div class=' blue bar ' id=' blue _ bar ' span/span p id=' blue _ num '/p/div/div/div

使用CSS美化页面，加载背景图片，确定相对位置等。您可以直接复制下面的代码，并在自己的项目中稍加修改。投票{ width:288px高度：220 px；margin:60px汽车20px汽车；位置：relative}。votetitle { width :100%；height:62pxbackground : URL(icon . png)no-repeat 0 30px；font-size:15px}。红色{ position:absoluteleft:0top:90px高度：80 px；} .蓝色{ position:absoluteright:0top:90px高度：80 px；} .votext { line-height :24 px }。votetxt span { float:right }。redhand { position:absoluteleft:0宽度：36 px；高度：36 px；background : URL(icon . png)no-repeat-1px-38px；cursor:pointer}。blue hand { position : absolute；right:0宽度：36 px；高度：36 px；background : URL(icon . png)no-repeat-41px-38px；cursor:pointer}。grayhand { width:34pxheight:34pxbackground : URL(icon . png)no-repeat-83px-38px；cursor:pointer}。redbar { position:absoluteleft:42pxmargin-top :8 px；} .bluebar { position:absoluteright:42pxmargin-top :8 px；} .redbar span { display:blockheight:6px背景：红色；宽度：100%；边界半径：4 px；} .bluebar span { display:blockheight:6px背景# 09f宽度：100%；边界半径：4 px；位置：绝对；右：0}。redbar p { line-height :20 px；color:red} .blue bar p { line-height :20 px；color: # 09ftext-align : right；margin-top:6px} jQuery

当你点击手动按钮时，使用jQuery的$。getjson()向后台php发送一个Ajax请求。如果请求成功，您将获得后台返回的json数据，然后jQuery将处理JSON数据。下面的函数：getdata(url，sID)，传递了两个参数，url是请求的后台php地址，sID代表当前投票主题id。在这个函数中，返回的json数据包括红蓝两党的投票人数和两党的比例，根据比例计算出比例条的宽度，异步展现投票效果。

函数getdata(url，sid){ $ .getJSON(url，{id:sid}，函数(数据){ if(数据。success==1){ var w=208；//定义比例条的总宽度//红方投票数$('#red_num ').html(数据。红色)；$('#red ').css('width '，数据。red _ percent * 100“%”)；var red _ bar _ w=w *数据。red _ percent-10；//红方比例条宽度$('#red_bar ').css('width '，red _ bar _ w)；//蓝方投票数$('#blue_num ').html(数据。蓝色)；$(“# blue”).css('width '，数据。blue _ percent * 100“%”)；var blue _ bar _ w=w *数据。蓝色百分比；//蓝方比例条宽度$(“# blue _ bar”).css('width '，blue _ bar _ w)；} else { alert(数据。味精)；} });} 当页面初次加载时，即调用getdata()，然后点击给红方投票或给蓝方投票同样调用getdata()，只是传递的参数不一样。注意本例中的参数（同突发球形干扰)电离层的突然骚扰我们设置为1,是根据数据表中的编号设定的，开发者可以根据实际项目读取准确的身份证。

$(function(){ //获取初始数据getdata('vote.php '，1)；//红方投票$('.'redhand ').点击(function(){ getdata('vote.php？action=red '，1)；});//蓝方投票$('.蓝色的手').点击(function(){ getdata('vote.php？action=blue '，1)；});});服务器端编程语言(专业超文本预处理器的缩写)

前端请求了后台的投票。php，投票。服务器端编程语言（Professional Hypertext Preprocessor的缩写）将根据接收的参数，连接数据库，调用相关函数。

include _ once(' connect。PHP’)；$ action=$ _ GET[' action ']；$ id=int val($ _ GET[' id '])；$ IP=get _ client _ IP()；//获取ip if($action=='red'){//红方投票投票(1美元、身份证美元、ip美元);}elseif($action=='blue'){//蓝方投票投票(0，$id，$ IP)；}else{//默认返回初始数据echo jsons($ id)；}函数投票($type，$id，$ip)用来做出投票动作，$type表示投票方，$id表示投票主题的id，$ip表示用户当前知识产权。首先根据用户当前知识产权，查询投票记录表投票数_ip中是否已经存在当前互联网协议(互联网协议的缩写)记录，如果存在，则说明用户已投票，否则更新红方或蓝方的投票数，并将当前用户投票记录写入到投票数_ip表中以防重复投票。

函数投票($type，$id，$ip){ $ip_sql=mysql_query('从投票_ip中选择ip，其中vid='$id '和IP=' $ IP ')；$ count=MySQL _ num _ rows($ IP _ SQL)；if($count==0){//还没有投票if($type==1){//红方$sql='更新投票集赞=赞1,其中id=' .$ id}else{//蓝方$sql='更新投票集取消链接=取消链接1,其中id=' .$ id } MySQL _ query($ SQL)；$sql_in='插入选票_ip(视频、ip)值(' $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)通过查询当前编号的投票数，计算比例并返回json数据格式供前端调用。

函数jsons($id){ $query=mysql_query('从投票中选择*其中id=').$ id)；$ row=MySQL _ fetch _ array($ query)；$ red=$ row[' like ']；$ 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；返回JSON _ encode($ arr)；} 文中还涉及到获取用户真实互联网协议(互联网协议)的函数：get_client_ip()，点击这里可以看相关代码：//www .JB 51。net/article/58610。html文件的后缀

关系型数据库

最后，贴上关系型数据库数据表，票数表用来记录红蓝双方的投票总数，票数_ip表则用来存放用户的投票互联网协议(互联网协议)记录。

CREATE TABLE IF NOT EXISTS ` loats `(` id ' int(10)NOT NULL AUTO _ INCREMENT，` like ' int(10)NOT NULL DEFAULT ' 0 '，` unlikes ' int(10)NOT NULL DEFAULT ' 0 '，` PRIMARY KEY(` id `))ENGINE=MyISAM DEFAULT CHARSET=utf8；插入`投票(' id '，' like '，' unlikes ')值(1,30,10);如果不存在则创建表，"投票_ IP”(“id”int(10)不为空，“vid”int(10)不为空，“IP”varchar(40)不为空)ENGINE=MyISAM DEFAULT CHARSET=ut F8；PHP MySql jQuery实现顶和踩投票功能

结合一个实例，说明了PHP MySql jQuery实现的“顶”和“步”投票功能，通过记录用户的IP判断用户的投票行为是否有效。这个例子也可以扩展到投票系统。

首先，我们在页面上放置“Top”和“Step”按钮，即#dig_up和#dig_down，这两个按钮记录了票数及其百分比。

div class=' dig ' div id=' dig _ up ' class=' dig _ up ' span id=' num _ up '/span p非常好而且强大！/p div id=' bar _ up ' class=' bar ' span/span/I/div/div div id=' dig _ down ' class=' dig _ down ' span id=' num _ down '/span p太可怕了！/p div id=' bar _ down ' class=' bar ' span/span/I/div/div div id=' msg '/div/div $(function(){//当鼠标悬停并离开两个按钮时，切换按钮背景样式$ ('# dig _ up ')。悬停(function }、function(){ $(this)。remove CLaSS(' digup _ on ')；});$('#dig_down ')。悬停(function(){ $(this))。addCLaSS(' digdown _ on ')；}，function(){ $(this)。remove CLaSS(' digdown _ on ')；});//初始化数据getdata('ajax.php '，1)；//单击顶部时，$ ('# dig _ up ')。单击(function () {getdata ('ajax.php？action=like '，1)；});//$ ('# dig _ down ')。单击(function () {getdata ('ajax.php？action=不像'，1)；});});以上内容基于PHP jQuery MySql实现红蓝(顶踩)投票代码，希望大家喜欢。