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 动态添加表格行
Jun 22 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 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下实现折线图效果的代码
2007/04/28 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
简单的JS多重继承示例
2008/03/13 Javascript
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Python实现端口检测的方法
2018/07/24 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python远程邮件控制电脑升级版
2019/05/23 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python 实现屏幕录制示例
2019/12/23 Python
详解python中的异常捕获
2020/12/15 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
电子专业推荐信范文
2013/11/18 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
摄影助理岗位职责
2014/02/07 职场文书
技能竞赛活动方案
2014/02/21 职场文书
远程培训的心得体会
2014/09/01 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
小学班主任工作随笔
2015/08/15 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python