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

首先我们在页面上放置“顶”和“踩”的按钮,即#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);
});
});

函数getdata()

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

ajax.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);
}

投票的表结构

 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(11) NOT NULL AUTO_INCREMENT,
`vid` int(11) NOT NULL,
`ip` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

本文转自:https://www.sucaihuo.com/php/105.html 转载请注明出处!

PHP+Mysql实现网站顶和踩投票功能实例的更多相关文章

  1. PHP+MySql+jQuery实现的“顶”和“踩”投票功能

    index.html <!DOCTYPE HTML><html><head><meta charset="utf-8"><ti ...

  2. PHP+Ajax实现文章心情投票功能实例

    一个PHP+Ajax实现文章心情投票功能实例,可以学习了解实现投票的基本流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向Ajax.php发送请求,PHP验证用户coo ...

  3. web系列教程之php 与mysql 动态网站 。检索 与更新。

    接着上次WEb 系列开发之php 与mysql动态网站入门. 个人觉得,学习技术就像一棵大树,主干很重要,枝叶其次.对于学习技术,我们应该分清主次关系.怎么学?为什么要学?有一个较好的分寸. 有时候觉 ...

  4. InnoSQL HA Suite的实现原理与配置说明 InnoSQL的VSR功能Virtual Sync Replication MySQL 5.5版本引入了半同步复制(semi-sync replicaiton)的功能 MySQL 5.6支持了crash safe功能

    InnoSQL HA Suite的实现原理与配置说明  InnoSQL的VSR功能Virtual Sync Replication MySQL 5.5版本引入了半同步复制(semi-sync repl ...

  5. jsp+servlet+mysql 实现简单的银行登录转账功能

    jsp+servlet+mysql 实现简单的银行登录转账功能 [前期的准备] html(登录界面),servlet(处理业务逻辑),jsp(主要实现界面),mysql(实现与数据库的简单的交互)先从 ...

  6. js上移、下移、置顶、置底功能实现

    实现页面上列表内容上移.下移.置顶.置底 功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...

  7. 探索 Windows Azure 网站中的自动伸缩功能

     去年10月,我们发布了若干针对 WindowsAzure平台的更新,其中一项更新是添加了基于日期的自动伸缩调度支持(在不同的日期设置不同的规则). 在这篇博客文章中,我们将了解自动伸缩的概念,并 ...

  8. [个人网站搭建]·Django增加评论功能(Python3)

    [个人网站搭建]·Django增加评论功能 个人主页--> https://xiaosongshine.github.io/ 个人网站搭建github地址:https://github.com/ ...

  9. MySQL 在Windows平台上的安装及实例多开

    MySQL在Windows平台上的安装及实例多开   by:授客 QQ:1033553122 测试环境 Win7 64 mysql-5.7.20-winx64.zip 下载地址: https://cd ...

随机推荐

  1. 试题编号: 201903-3 试题名称: 损坏的RAID5

    这题的数据未免也太水了,题目的意思好像默认是每块磁盘装载数据的长度是相等的.我写了判断每次取数据是否会超过每块磁盘存的数据的长度,然而并没有什么卵用.交上去20分,写了个数据测了下,如果要求的块太大的 ...

  2. Windows上面搭建FlutterAndroid运行环境

    1.下载安装JDK https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.配置J ...

  3. JS-apply、call、bind

    最近查看了很多关于apply的文章,就随手记录一下. Apply apply: 方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args) 方法能接收两个 ...

  4. Ora 命令行建立账号

    .使用cmd 进入 sqlplus /nolog conn system/ as sysdba .修改密码 alter user ebthis identified by new_psw; .查看用户 ...

  5. docker部署-windows环境

    docker部署-windows环境 1.      docker windows 1.1.    安装 win7或者win8需要利用docker toolbox来安装,其是一个docker工具集,w ...

  6. vs2019本地调试异步程序

    1.vs2019创建一个webapi服务,启动本地webapi服务, 2.使用vs2019再打开一个相同的应用程序,并将异步程序所在的程序集设置为启动项,并启动,启动后点击调试->全部拆离 3. ...

  7. Vue项目引进ElementUI组件

    1.https://blog.csdn.net/Mr_JavaScript/article/details/80741914 1.1 安装 npm install element-ui -save 1 ...

  8. node vue 项目git 管理

    push 上传到云的时候,依赖包及相关文件是不上传上去的, 所以每次克隆到本地后,node 项目运行前须要 npm install 安装对应依赖 vue 项目编译前也须要  npm install,安 ...

  9. 洛谷P1144最短路计数

    题目描述 给出一个NNN个顶点MMM条边的无向无权图,顶点编号为1−N1-N1−N.问从顶点111开始,到其他每个点的最短路有几条. 输入格式 第一行包含222个正整数N,MN,MN,M,为图的顶点数 ...

  10. JAVA GUI窗体及控件

    Swing基本操作: JAVA显示一个带按钮的窗口: import java.awt.*; import javax.swing.*; import javax.swing.border.EmptyB ...