php+mysql投票代码_PHP+jQuery+MySql实现红蓝投票功能

本文是一篇综合知识应用类文章,需要您具备PHP、jQuery、MySQL以及html和css方面的基本知识。本文在《PHP+MySql+jQuery实现的“顶”和“踩”投票功能》一文基础上做了适当改进,共用了数据表,您可以先点击了解这篇文章。

HTML

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

Html代码  925a194438bdd6e4bf6c89525734f9cc.png

您对Helloweba提供的文章的看法?
非常实用完全看不懂

CSS

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

Html代码  925a194438bdd6e4bf6c89525734f9cc.png

.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数据有红蓝双方的投票数,以及双方比例,根据比例计算比例条的宽度,异步交互展示投票效果。

Js代码  925a194438bdd6e4bf6c89525734f9cc.png

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。

Js代码  925a194438bdd6e4bf6c89525734f9cc.png

$(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将根据接收的参数,连接数据库,调用相关函数。

Php代码  925a194438bdd6e4bf6c89525734f9cc.png

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表中以防重复投票。

Php代码  925a194438bdd6e4bf6c89525734f9cc.png

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数据格式供前端调用。

Php代码  925a194438bdd6e4bf6c89525734f9cc.png

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);

}

MySQL

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

Sql代码  925a194438bdd6e4bf6c89525734f9cc.png

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;

再次提醒,下载的demo如果运行不了,请先检查数据库连接配置是否正确。好了,少说两句,快来投票吧:查看演示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/529541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

numpy 最大值_第 85 天:NumPy 统计函数

数学统计在我们的程序当中特别是数据分析当中是必不可少的一部分,本文就来介绍一下 NumPy 常见的统计函数。最大值与最小值numpy.amin()用于计算数组中的元素沿指定轴的最小值。可以通过 axis 参数传入坐标轴来指定统计的轴,当指定 axis 时,a…

java中如何实现变量可配置_Java基础-如何配置环境变量

Java环境变量详细教程第一步、打开电脑环境变量设置窗口以Win10系统为例子。在桌面找到此电脑,右键此电脑— —>属性,点击属性— —>点击左侧高级系统设置点击高级系统设置点击环境变量第二步、新建JAVA_HOME点击系统变量中的新建,出现输入框&…

python三引号解析_[宜配屋]听图阁

和C语言一样,引号属于特殊功能字符,不能够像普通字符那样直接通过print打印,需要进行一些处理,比如说反斜杠转义等。这里介绍几种打印三引号的方法,希望对需要的朋友有用。1、第一中方法比较简单,直接使用三…

abaqus python 建立节点集合_在Python中创建Abaqus集

我想用Python在Abaqus中创建一个带边的几何集。我不会事先知道边的数目。尝试将边放入数组中,然后创建集合。你知道吗myEdgesForSet []for i in range(0, len(mdb.models[Model].parts[Part].edges)):if something in mdb.models[Model].parts[Part].edges[i].feat…

java类默认访问权限_Java的四种访问权限

❝ 所谓访问权限,指的就是本类中的成员变量、成员方法对其他类的可见性❞试想一想,当我们修改一个非常庞大的项目时,如果所有变量和方法都是公共权限,那么后端中任何类都有权限去修改它的变量和方法,很有可能修改后就导…

java 数组 反射_【译】10. Java反射——数组

用Java反射来处理数组有时候是技巧性很强的。特别是如果你需要获取一个给定类型的数组的Class对象,像int[ ]等。本文将讲述怎么用Java反射来创建数组和获取数组的Class对象。下面是所涵盖的主题列表:java.lang.reflect.ArrayCreating ArraysAccessing Ar…

定时执行java程序_如何让Java程序定时运行

由于项目开发的需要,必须实现让一个Java程序定时运行。比如,我的项目中,有一个网络蜘蛛,需要从互联网上抓取数据,与其配合,有另一个程序来对新抓取的页面进行索引的创建,由于数据源更新频率不高…

java递归实现排序_快速排序算法原理及java递归实现

快速排序 对冒泡排序的一种改进,若初始记录序列按关键字有序或基本有序,蜕化为冒泡排序。使用的是递归原理,在所有同数量级O(n longn) 的排序方法中,其平均性能最好。就平均时间而言,是目前被认为最好的一种内部排序方…

java 泛型 .net_Java泛型

标签:上一篇博文java8函数式编程--收集器collector:(http://my.oschina.net/joshuashaw/blog/487322)讲得比较随性,并没有把源码一句一句拿出来分析,后来发现groupingBy方法最后有一个if-else分支用来返回不同类型的collector&…

卡法电子商务 java_javacard DES算法API使用示例

********** 2017年3月15日留言 ——关于java卡Applet系列csdn博文 *************貌似有不少人在看我写的几篇关于java卡applet的博文,也收到了一些评论指正博文错误,或者私信叫我发代码文件过去。在此需要说明的是,java卡applet的这几篇博文…

java http请求原理_浅谈Spring Cloud zuul http请求转发原理

spring cloud 网关,依赖于netflix 下的zuul 组件zuul 的流程是,自定义 了ZuulServletFilter和zuulServlet两种方式,让开发者可以去实现,并调用先来看下ZuulServletFilter的实现片段Overridepublic void doFilter(ServletRequest s…

java堆外内存溢出_JVM 案例 - 堆外内存导致的溢出错误

案例一个网站为了实现客户端实时从服务端接收数据,使用了 CometD 1.1.1 作为服务端推送框架,服务器是 Jetty7.1.4,CPU i5,内存 4G,操作系统 32位Windows。服务端常常抛出内存溢出异常,管理员把堆开到最大(3…

java mail outlook_已启用Outlook API邮件与邮箱用户

一个非常微妙的问题,也许是特定的环境 . 我正在尝试使用Outlook 2010 API从启用邮件的用户中识别邮箱用户 . 我们在Notes to Exchange迁移期间使用Dell Quest迁移工具,它是一个流动的项目 . 仍处于原型阶段,因此使用VB宏来最终将在C&#xff…

oracle java存储过程返回值_java程序调用Oracle 存储过程 获取返回值(无返回,非结果集,结果集)...

java程序调用Oracle 存储过程 获取返回值(无返回,非结果集,结果集)oracle中procedure是不能有返回值的,要想返回值,就得有输出参数,同样要想返回记录集,可以把游标类型作为输出参数。下面是详细情况说明&am…

mysql dump工具升级_MySQL数据库升级

当前不少系统的数据库依旧是MySQL5.6,由于MySQL5.7及MySQL8.0在性能及安全方面有着很大的提升,因此需要升级数据库。本文通过逻辑方式、物理方式原地升级来介绍MySQL5.6 升级至MySQL5.7的方法,并介绍其使用场景。1. 逻辑方式升级逻辑方式升级…

java int 128 ==_为什么 Java Integer 中“128==128”为false,而”100==100“为true?

这是一个挺有意思的讨论话题,让我们用代码说话吧!运行下面的代码:Integer a 128, b 128;System.out.println(a b);Integer c 100, d 100;System.out.println(c d);你会得到:falsetrue基本知识:我们知道,如果两个引用指向同一个对象&…

mysql课程表学时_Mysql 巩固提升 (学生表_课程表_成绩表_教师表)

方便Mysql 巩固提升创建表并插入数据:-- ------------------------------ Table structure for student-- ----------------------------DROP TABLE IF EXISTS student;CREATE TABLE student (id int(11) NOT NULL AUTO_INCREMENT,sname varchar(32) DEFAULT NULL,s…

初始java_第一章__初始JAVA

1.java的三个发展方向:JAVASE(面向对象、API、JVM)、JAVAME(移动设备、游戏、通信)、JAVAEE(JSP、EJB、服务)2.开发JAVA的程序步骤:1.编写源程序 2.编译 3.运行3.JDKJRE开发工具下载java环境jdk 安装并配置环境变量,.安装直接下一步下一步直到…

python最常用的版本、也称为classic_2021年中国大学《创新思维与创业》单元测试答案...

2021年中国大学《创新思维与创业》单元测试答案被人们称为 “寒地水稻第一人”的是袁隆平答:错地图数据的基本特征包括答:时间属性 空间定位属性 地理属性对卖方征税导致商品价格上升答:√( )是在床榻上使用的一种矮形家具。答:炕…

java 泛型 继承_java基础之泛型的继承

关于泛型的基本介绍和理解请参考以下几篇文章&#xff0c;或查询更多资料&#xff1a;本篇以简单的List<>方式来进行说明。ArrayList继承了List,ArrayList没有继承ListList>等价于List extends Object>请参考以下代码&#xff1a;/*** author Ding Chengyun* 2014-…