JavaScript实现星星等级评价功能

更新时间：2017年03月22日 10:13:12 作者：程序猿？

这篇文章主要为大家详细介绍了JavaScript实现星星等级评价功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
星星

手把手教你搭建ES6的开发运行环境
如今ES6已经发布了有一段时间了，很多人学了ES6但是却没运行环境，下面这篇文章主要给大家介绍了关于搭建ES6运行环境的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
mui back 返回刷新页面的实例
下面小编就为大家分享一篇mui back 返回刷新页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
支付宝小程序从手动埋点到自动埋点的实现过程
埋点的意思是在你想要的数据节点出进行设置,可以方便进行采集,下面这篇文章主要给大家介绍了关于支付宝小程序从手动埋点到自动埋点的相关资料,需要的朋友可以参考下
2022-03-03
原生js封装的一些jquery方法(详解)
下面小编就为大家带来一篇原生js封装的一些jquery方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
JavaScript代理模式原理与用法实例详解
这篇文章主要介绍了JavaScript代理模式原理与用法,结合实例形式详细分析了JavaScript代理模式基本概念、原理、用法与操作注意事项,需要的朋友可以参考下
2020-03-03
uniapp插件uview下表单无法动态校验的问题解决
最近项目中用到了uview 在做表单时用到了校验,发现校验不友好的结果,下面这篇文章主要给大家介绍了关于uniapp插件uview下表单无法动态校验的问题解决,需要的朋友可以参考下
2022-12-12
js实现canvas保存图片为png格式并下载到本地的方法
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法，非常具有实用价值，需要的朋友可以参考下
2017-08-08
JS验证图片格式和大小并预览的简单实例
下面小编就为大家带来一篇JS验证图片格式和大小并预览的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
javascript实现简单的省市区三级联动
本文给大家反映的是javascript实现的简单的省市区三级联动特效，不需要访问后台服务器端，不使用Ajax，无刷新，纯JS实现的省市区三级联动。当省市区数据变动是只需调正js即可。
2015-05-05
微信小程序使用GoEasy实现websocket实时通讯
这篇文章主要介绍了微信小程序使用GoEasy实现websocket实时通讯的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05