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面向对象、prototype、call()、apply()
May 14 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
vue实现虚拟列表功能的代码
Jul 28 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
谈谈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中strtotime函数使用方法详解
2011/11/27 PHP
php实现Session存储到Redis
2015/11/11 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
python得到电脑的开机时间方法
2018/10/15 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
党员群众路线承诺书
2014/05/20 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
合同纠纷调解书
2015/05/20 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
区域销售大会开幕词
2016/03/04 职场文书