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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
javascript 常用功能总结
Mar 18 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php 如何获取数组第一个值
2013/08/06 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP实现百度人脸识别
2019/05/06 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
程序员机试试题汇总
2012/03/07 面试题
幼儿园中班教师寄语
2014/04/03 职场文书
施工安全承诺书
2014/05/22 职场文书
不错的求职信范文
2014/07/20 职场文书
前台接待员岗位职责
2015/04/15 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js