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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
Vue简单实现原理详解
May 07 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生成HTML静态页面实例代码
2008/08/31 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
初探nodeJS
2017/01/24 NodeJs
layui弹出层效果实现代码
2017/05/19 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python科学计算之Pandas详解
2017/01/15 Python
Python判断两个对象相等的原理
2017/12/12 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
简单的项目建议书模板
2014/03/12 职场文书
学生请假条格式
2014/04/11 职场文书
酒店端午节活动方案
2014/08/26 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
就业协议书范本
2014/10/08 职场文书
商务英语求职信范文
2015/03/19 职场文书
会议主持词结束语
2015/07/03 职场文书