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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP调用其他文件中的类
2018/04/02 PHP
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
用Python编写一个国际象棋AI程序
2014/11/28 Python
儿童python练习实例
2018/05/27 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
体育活动总结范文
2014/05/04 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Python数据结构之队列详解
2022/03/21 Python