jQuery+PHP星级评分实现方法


Posted in Javascript onOctober 02, 2015

本例实现的效果:

过渡动画显示评分操作。
及时更新平均得分和用户所评的分数。
后台限制用户重复评分操作,并在前端及时显示。
XHTML

<div class="rate"> 
  <div class="big_rate"> 
    <span rate="2"> </span> 
    <span rate="4"> </span> 
    <span rate="6"> </span> 
    <span rate="8"> </span> 
    <span rate="10"> </span> 
    <div style="width:45px;" class="big_rate_up"></div> 
  </div> 
  <p><span id="s" class="s"></span><span id="g" class="g"></span></p> 
  <div id="my_rate"></div> 
</div>

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

.rate{width:600px; margin:100px auto; font-size:14px; position:relative; padding:10px 0;} 
.rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; 
top:0; left:100px; margin-left:140px;} 
.rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;} 
.rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;} 
.big_rate {width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px; 
display:inline-block; background:url(star.gif) left bottom repeat-x;} 
.big_rate span {display:inline-block; width:24px; height:28px; position:relative; z-index:1000; 
 cursor:pointer; overflow:hidden;} 
.big_rate_up {width:140px; height:28px; position:absolute; top:0; left:0; 
 background:url(star.gif) left top;} 
#my_rate{ position:absolute; margin-top:40px; margin-left:100px} 
#my_rate span{color:#dd5400; font-weight:bold}

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

function get_rate(rate){ 
  ....do some thing 
}

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

rate=rate.toString(); 
  var s; 
  var g; 
  $("#g").show(); 
  if (rate.length>=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,用于前端显示平均分。
接下来,当我们鼠标滑向星星时,会产生一个动画效果,亮星星的宽度会随着鼠标滑向变化,分数值也会随之变化。

$(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000); 
$(".big_rate span").each(function(){ 
    $(this).mouseover(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请求,与后台交互。

var score = $(this).attr("rate"); 
$("#my_rate").html("您的评分:<span>"+score+"</span>"); 
  $.ajax({ 
     type: "POST", 
     url: "post.php", 
     data:"score="+score, 
     success: function(msg){ 
      if(msg==1){ 
        $("#my_rate").html("<span>您已经评过分了!</span>"); 
      }else if(msg==2){ 
        $("#my_rate").html("<span>您评过分了!</span>"); 
      }else{ 
        get_rate(msg); 
      } 
    } 
  });

不难看出,当单击星星时,前端以POST方式向后台程序post.php发送ajax请求,传递参数score即所评分数。后台程序在确定评分数了,进行相应处理,根据处理结果向前端发送不同的处理信息。
还有不要忘了,当鼠标离开星星的时候应该还原分数值:

$(".big_rate").mouseout(function(){ 
  $("#s").text(s); 
  $("#g").text("."+ g); 
  $(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14); 
})

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

$(function(){ 
  get_rate(88); 
});

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

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表结构:

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星级评分实现方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 #Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 #Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 #Javascript
JS处理json日期格式化问题
Oct 01 #Javascript
JS日期格式化之javascript Date format
Oct 01 #Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 #Javascript
RequireJS入门一之实现第一个例子
Sep 30 #Javascript
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP的拦截器实例分析
2014/11/03 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python实现机器学习之元线性回归
2018/09/06 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Django 反向生成url实例详解
2019/07/30 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
基于Python正确读取资源文件
2020/09/14 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
关于打架的检讨书
2014/01/17 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Golang 对es的操作实例
2022/04/20 Golang
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis