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之Document元素选择器篇
Aug 14 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
JS随机数产生代码分享
Feb 24 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php加密解密字符串示例
2016/10/13 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
node.js到底要不要加分号浅析
2018/07/11 Javascript
vue生命周期实例小结
2018/08/15 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
js实现时钟定时器
2020/03/26 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python读取xlsx的方法
2018/12/25 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
主要负责人任命书
2014/06/06 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
项目负责人岗位职责
2015/02/15 职场文书
美丽的大脚观后感
2015/06/03 职场文书
商场广播稿范文
2015/08/19 职场文书
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript