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 相关文章推荐
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
基于vue2实现上拉加载功能
2017/11/28 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
vue实现图片预览组件封装与使用
2019/07/13 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python内置模块turtle绘图详解
2017/12/09 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
PageFactory设计模式基于python实现
2020/04/14 Python
python能做哪方面的工作
2020/06/15 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
九年级数学教学反思
2014/02/02 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers