php评星,jQuery+PHP星级评分实现方法

搜索热词

本例实现的效果:

过渡动画显示评分操作。

及时更新平均得分和用户所评的分数。

后台限制用户重复评分操作,并在前端及时显示。

XHTML

HTML结构分为用于显示灰星星div#big_rate、亮星星div#big_rate_up、分数span#s及span#g和提示信息div#my_rate。

CSS

jQuery

我们先来写一个函数get_rate()来处理评分的前端交互。

函数get_rate(rate),需要传递一个参数:rate,用来表示平均分值。接着在函数里要处理参数rate:

=3){

s=10;

g=0;

$("#g").hide();

}else if(rate=="0"){

s=0;

g=0;

}else{

s=rate.substr(0,1);

g=rate.substr(1,1);

}

$("#s").text(s);

$("#g").text("."+ g);

将平均分值rate转换成格式如:6.8,用于前端显示平均分。

接下来,当我们鼠标滑向星星时,会产生一个动画效果,亮星星的宽度会随着鼠标滑向变化,分数值也会随之变化。

SEOver(function(){

$(".big_rate_up").width($(this).attr("rate") * 14 );

$("#s").text($(this).attr("rate"));

$("#g").text("");

}).click(function(){

...ajax异步提交给后台处理

})

})

上面的代码不难理解,需要说明的是为什么宽度要乘以14呢?因为图片的宽度是28,总共5张图片表示满分10分,算出来单位分值(1分)所占宽度为(5*28)/10=14。

在单击星星时,需要向后台地址发送一个ajax请求,与后台交互。

score = $(this).attr("rate");

$("#my_rate").html("您的评分:PHP",data:"score="+score,success: function(msg){

if(msg==1){

$("#my_rate").html("您已经评过分了!");

}else if(msg==2){

$("#my_rate").html("您评过分了!");

}else{

get_rate(msg);

}

}

});

不难看出,当单击星星时,前端以POST方式向后台程序post.PHP发送ajax请求,传递参数score即所评分数。后台程序在确定评分数了,进行相应处理,根据处理结果向前端发送不同的处理信息。

还有不要忘了,当鼠标离开星星的时候应该还原分数值:

PHP;">

$(".big_rate").mouSEOut(function(){

$("#s").text(s);

$("#g").text("."+ g);

$(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);

})

完成了函数get_rate(),我们只需要在页面载入时调用就OK。

PHP程序需要处理的有:接收前端发送过来的分数值,通过cookie判断用户IP和评分时间,防止重复评分。

PHP;">

include_once ('connect.PHP'); //连接数据库

$score = $_POST['score'];

if (isset ($score)) {

$cookiestr = getip();

$time = time();

if (isset ($_COOKIE['person']) && $_COOKIE['person'] == $cookiestr) {

echo "1";

}

elseif (isset ($_COOKIE['rate_time']) && ($time -intval($_COOKIE['rate_time'])) < 600) {

echo "2";

} else {

$query = MysqL_query("update raty set voter=voter+1,total=total+'$score' where id=1");

$query = MysqL_query("select * from raty where id=1");

$rs = MysqL_fetch_array($query);

$aver = $rs['total'] / $rs['voter'];

$aver = round($aver,1) * 10;

//设置COOKIE

setcookie("person",$cookiestr,time() + 3600);

setcookie("rate_time",time(),time() + 3600);

echo $aver;

}

}

很显然,当用户提交过一次评分后,程序会记录用户的IP和时间,以防止重复提交,当用户是第一次评分时,程序执行操作,将评分值加入数据表,并计算平均分返回给前端调用。

关于如何获取用户IP的方法getip()在DEMO中已经有了,这里不做重点介绍,请大家自行下载。

最后附上MysqL表结构:

sql;">

CREATE TABLE IF NOT EXISTS `raty` (

`id` int(11) NOT NULL auto_increment,`voter` int(10) NOT NULL default '0' COMMENT '评分次数',`total` int(11) NOT NULL default '0' COMMENT '总分',PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

以上就是jQuery+PHP星级评分实现方法,希望对大家的学习有所帮助。

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

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

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

相关文章

Web Api无法访问 404

最近需要在项目中添加一个Web Api&#xff0c;项目是.net mvc4项目。要想添加一个api&#xff0c;无论你怎么封装&#xff0c;无非就是在Application_Start方法中将WebApi的路由注册进去就行了。例如如下代码&#xff1a; public static class WebApiConfig{public static void…

RHE5服务器配置——Samba服务器

Samba的核心 Samba的核心是两个守护进程&#xff0c;即smbd和nmbd。服务器启动到停止期间持续运行&#xff0c;smba监听139TCP端口&#xff1b;nmbd监听137和 138UDP端口。smbd和nmbd使用的全部配置信息保存在smb.conf文件中&#xff0c;smb.conf向smbd和nmbd两个守护进程说明输…

python 数据库模块

From: http://www.cnblogs.com/czh-liyu/archive/2008/04/22/1165213.html 目录 专用数据库连接模块 MySQL SQLite PostgreSQL Oracle IBM DB2 SAP DB Infomix Interbase Ingres Sybase SQL Server ThinkSQL Matisse 通用数据库接口模块 ODBC JDBC SQLRelay 其它模块 Gadfly …

PHP检查微信域名屏蔽接口,微信域名检测API接口,实时查询域名是否被微信拦截...

微信域名检测API接口的应用场景&#xff1a;由于微信对外部链接内容规范比较严格&#xff0c;所以可能一不小心就会被判定为是违反内容规范的&#xff0c;或被同行恶意举报投诉之类的。那么此时就要用到微信域名检测接口&#xff0c;实时检测域名的状态&#xff0c;实时查询域名…

lhgdialogV2.37 使用

/Files/tiger8000/lhgdialogV2.37完整版.rar parent.aspx 父页面&#xff1a; <script src"../lhgdialog/lhgcore.min.js" type"text/javascript"></script> <script src"../lhgdialog/lhgdialog.js" type"text/javascript&…

NGINX + TOMCAT7 + MEMCACHED 实现SESSION 共享

原文地址&#xff1a; http://my.oschina.net/u/1791256/blog/283064 TOMCAT7.0 NGINX MEMCACHED memcached-session-manager 实现SESSION共享 http://blog.csdn.net/nerissa/article/details/18961361 ; //参考博客 http://pan.baidu.com/s/1pJlZ0mB //相关包下载&#…

实验二十四、OSPF 在NBMA 环境中点到点的配置

实验二十四、OSPF 在NBMA 环境中点到点的配置 一、 实验目的 1. 掌握NBMA 环境中点到点的配置 2. 理解NBMA 环境中点到点网络类型的意义 二、 应用环境 在帧中继的网络中&#xff0c;OSPF 的路由更新不能正常进行&#xff0c;需要配置点到点的网络类型保证OSPF 协议的正常运行…

java可视化多人群聊,java 网络编程-TCP-多人群聊(自问自答)

服务器&#xff1a;public class Chat {public static void main(String[]args) throws IOException{System.out.println("服务器启动中...");//创建服务器ServerSocket servernew ServerSocket(9999);//阻塞式等待连接&#xff0c;当客户端Socket创建好以后才开启wh…

英语------------单词复数形式的规律

1、名词由单数变复数的基本方法如下&#xff1a; ①在单数名词词尾加s。如&#xff1a;map → maps,boy→ boys,horse→ horses, table→ tables. ②s,o,x ,sh,ch结尾的词加es.如&#xff1a;class→classes, box→boxes, hero→heroes, dish→dishes, bench→benches. [注]&am…

ad从2003升级到2008总结

一、升级前要在2003域控运行adprep命令来扩展2003森林架构和域架构 &#xff08;adprep命令在2008 r2安装光盘的support\adprep目录。需要将其复制到2003域控中&#xff09; 源2003 server为64位&#xff1a;adprep.exe 源2003 server为32位&#xff1a;adprep32.exe 转载于:h…

php 只读变量,PHP:类中的静态Readonly属性

直接回答您的问题&#xff1a;不,您不能将常规属性标记为只读.如果你想设置基本类型(数组除外),那将永远不会改变,你应该使用常量const QWE 666;这对于对象和数组不起作用.我看到两个(让我们说)“解决方案”>使用Getterprivate $qwe;public function getQwe() { return $th…

在Xcode6中搭建Python开发环境

http://jingyan.baidu.com/article/f71d60379c73001ab741d14e.html 对于使用Mac电脑&#xff0c;刚入门Python的同学&#xff0c;一定很好奇是不是可以使用Xcode这款IDE工具集成学习Python语言&#xff0c;答案是Yes&#xff01;网络中有很多使用Xcode5搭建的帖子&#xff0c;现…

c++类模板及参数类型的运行时判断

/*C类模板及参数类型的运行时判断(typeid) */#include <stdio.h> #include <typeinfo> #include <vector> using namespace std;template<class T> class Exercise {public:typedef T Type;typedef vector < Type > VT;Exercise(int n);void Dis…

php redis 删除元素,redisTemplate.delete()不能删除元素

最近在学习redis&#xff0c;使用spring-data-redis的RedisTemplate.delete()方法删除时&#xff0c;添加是成功的&#xff0c;但是不能删除。代码如下public abstract class AbstractBaseRedisDao {Autowiredprotected RedisTemplate redisTemplate;// public void setRedisTe…

设计模式心得:三——命令模式

继续设计模式心得体验——命令模式。 命令模式&#xff1a; 将一个请求封装为一个对象&#xff0c;从而使你可用不同的请求对客户进行参数化&#xff1b;对请求排队或记录请求日志&#xff0c;以及支持可撤销的操作。 一般在命令模式中有三个元素&#xff0c;invoker、command、…

弱水三千 之 统计独立性、统计相关性辨析

序 在随机信号分析中&#xff0c;存在这样一个概念群&#xff1a;不相关、正交、统计独立。 当两个随机过程保持统计独立时&#xff0c;它们必然不相关&#xff1b;但反过来则不一定成立&#xff0c;即不相关的两个随机过程不一定能保持统计独立&#xff0c;唯有高斯过程才是个…

React开发(185):ant design table控制居中和宽度

{ title: 冻结金额, type: price, dataIndex: frozenAmount, align: center, width: 80 },{ title: 钱包状态, dataIndex: statusName, align: center, width: 80 },{ title: 所属商户, dataIndex: platformMerchantName, align: center, width: 80 },