JS实现带提示的星级评分效果完整实例


Posted in Javascript onOctober 30, 2015

本文实例讲述了JS实现带提示的星级评分效果。分享给大家供大家参考,具体如下:

这是一款JS仿淘宝网的星级评分系统,鼠标放在上边可以显示星级代表的评分级别,鼠标点击时会选中当前的星级,目前此功能在网页上十分流行,虽然是仿做的,但已经很不错的功能了,希望大家喜欢!

运行效果截图如下:

JS实现带提示的星级评分效果完整实例

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星级评分系统</title>
<style> 
body,div,ul,li,p{margin:0;padding:0;}
body{color:#666;font:12px/1.5 Arial;}
ul{list-style-type:none;}
#star{position:relative;width:600px;margin:10px auto;}
#star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
#star ul{margin:0 10px;}
#star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(images/star.png) no-repeat;}
#star strong{color:#f60;padding-left:10px;}
#star li.on{background-position:0 -28px;}
#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(images/icon.gif) no-repeat;padding:7px 10px 0;}
#star p em{color:#f60;display:block;font-style:normal;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var oStar = document.getElementById("star");
 var aLi = oStar.getElementsByTagName("li");
 var oUl = oStar.getElementsByTagName("ul")[0];
 var oSpan = oStar.getElementsByTagName("span")[1];
 var oP = oStar.getElementsByTagName("p")[0];
 var i = iScore = iStar = 0;
 var aMsg = [
    "很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
    "不满意|部分有破损,与卖家描述的不符,不满意",
    "一般|质量一般,没有卖家描述的那么好",
    "满意|质量不错,与卖家描述的基本一致,还是挺满意的",
    "非常满意|质量非常好,与卖家描述的完全一致,非常满意"
    ]
 for (i = 1; i <= aLi.length; i++)
 {
  aLi[i - 1].index = i;
  //鼠标移过显示分数
  aLi[i - 1].onmouseover = function ()
  {
   fnPoint(this.index);
   //浮动层显示
   oP.style.display = "block";
   //计算浮动层位置
   oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
   //匹配浮动层文字内容
   oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
  };
  //鼠标离开后恢复上次评分
  aLi[i - 1].onmouseout = function ()
  {
   fnPoint();
   //关闭浮动层
   oP.style.display = "none"
  };
  //点击后进行评分处理
  aLi[i - 1].onclick = function ()
  {
   iStar = this.index;
   oP.style.display = "none";
   oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
  }
 }
 //评分处理
 function fnPoint(iArg)
 {
  //分数赋值
  iScore = iArg || iStar;
  for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
 }
};
</script>
</head>
<body>
<div id="star">
 <span>点击星星就能打分</span>
 <ul>
 <li><a href="javascript:;">1</a></li>
 <li><a href="javascript:;">2</a></li>
 <li><a href="javascript:;">3</a></li>
 <li><a href="javascript:;">4</a></li>
 <li><a href="javascript:;">5</a></li>
 </ul>
 <span></span>
 <p></p>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 #Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 #Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 #Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 #Javascript
自己动手写的javascript前端等待控件
Oct 30 #Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 #Javascript
JavaScript获取function所有参数名的方法
Oct 30 #Javascript
You might like
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
php判断目录存在的简单方法
2019/09/26 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
举例讲解Python常用模块
2019/03/08 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
小学生新学期寄语
2014/01/19 职场文书
全民健身日活动方案
2014/01/29 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
物业管理工作方案
2014/05/10 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL