JavaScript实现星星等级评价功能


Posted in Javascript onMarch 22, 2017

本文实例为大家分享了js星星等级评价的具体代码,供大家参考,具体内容如下

效果图:

JavaScript实现星星等级评价功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container{
      float:left;
    }
    .score{
      float: left;
      position: relative;
      width: 100px;
      margin-top: 5px;
      margin-left: 10px;
    }
    span{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
    }
    .scoreDisplay{
      display: block;
    }
  </style>
  <script src="jquery-1.12.2.min.js"></script>
</head>
<body>
<!--  一个容器里面放5张图片,先所有的都空星图片-->
<!--  该案例的要点就是在于鼠标移动上去时改变图片的src-->
<div class="container">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
</div>
<div class="score">
  <span>很差</span>
  <span>较差</span>
  <span>一般</span>
  <span>较好</span>
  <span>很好</span>
</div>
<script>
  var img = $(".container img");//获取5张图片的集合
  var span = $(".score span");
  var i,j,k;//定义变量i,j,k
  k = -1;//k给予一个初始值-1,,不然后面第1个星星始终是被点亮的
  img.mouseenter(function(){ //设置鼠标进入时的效果,首先将所有的星星熄灭,然后再根据用户鼠标进入的星星下标值点亮星星
    span.removeClass("scoreDisplay");//鼠标进入时,将右边的评论清除掉
    img.attr("src",".idea/empty.png");
    i = img.index(this);
    for(j=0;j<=i;j++)
    {
      img.eq(j).attr("src",".idea/shining.png");
    }
    span.eq(i).addClass("scoreDisplay");//根据用户进入的i值来显示评论
  }).mouseleave(function(){  //仍然是将所有的星星熄灭,然后根据k值来点亮星星
    span.removeClass("scoreDisplay");//鼠标离开时,首先清除掉评论
    img.attr("src",".idea/empty.png");//接下来将所有星星变为空星
    for(j=0;j<=k;j++)//根据最终值k值来确定点亮几颗星星
    {
      img.eq(j).attr("src",".idea/shining.png");
    }
    if(k==-1)//如果k值=-1,则不显示任何一个评论内容
    {
      span.removeClass("scoreDisplay");
    }
    else{
      span.eq(k).addClass("scoreDisplay");//根据最终值k值显示评论
    }
  });
  $("img").click(function(){ //k记录用户点击鼠标时的星星下标值
    k = img.index(this);
  })
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
discuz表情的JS提取方法分析
Mar 22 #Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 #Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
Vue计算属性的学习笔记
Mar 22 #Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
yii操作cookie实例简介
2014/07/09 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
使用JavaScript破解web
2018/09/28 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
你真的了解Python的random模块吗?
2017/12/12 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python简单实现AES加密和解密
2019/03/28 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
创业融资计划书
2014/04/25 职场文书
创意婚礼策划方案
2014/05/18 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
2014年物流工作总结
2014/11/25 职场文书
职代会闭幕词
2015/01/28 职场文书
任命书格式范文
2015/09/22 职场文书