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 高级篇之函数 (四)
Apr 07 Javascript
js控制frameSet示例
Sep 10 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
Vue实现点击后文字变色切换方法
Feb 11 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
Vue 监听元素前后变化值实例
Jul 29 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php UTF8 文件的签名问题
2009/10/30 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
防卫过当辩护词
2015/05/21 职场文书
感恩教师主题班会
2015/08/12 职场文书
心理学培训心得体会
2016/01/22 职场文书
Django实现聊天机器人
2021/05/31 Python
python识别围棋定位棋盘位置
2021/07/26 Python