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 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
Puppet的一些技巧
Sep 17 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
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中的插件机制原理和实例
2014/07/08 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
vue实现表单录入小案例
2019/09/27 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python随机模块random使用方法详解
2020/02/14 Python
python让函数不返回结果的方法
2020/06/22 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
公司的门卫岗位职责
2014/09/09 职场文书
个人债务授权委托书
2014/10/17 职场文书
八达岭长城导游词
2015/01/30 职场文书
预备党员考察意见范文
2015/06/01 职场文书
现实表现证明材料
2015/06/19 职场文书
九不准学习心得体会
2016/01/23 职场文书
编写python程序的90条建议
2021/04/14 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers