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>

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

赞 (0)

相关推荐

  • JS实现评价的星星功能

    JS实现评价的星星功能

    刚开始接触写星星评价时,哇!估计脑子刚被驴踢了,竟然想到了最笨的办法-手工画五角星.妈呀! css样式都写了好大一串,还沾沾自喜终于画出来了,然后瞅一瞅旁边的妹子写得怎么样了,哇!人家机智的!直接用符号★就解决了!!!唉,智商捉急呀! 先上图看看吧: 虽然简单,还是有几个注意的地方: 1. 未点击时的hover效果,星星会随鼠标移动亮起来喔. 2. 点击后关闭hover效果. 3. 点击同一颗星星,星星可以随时换色. 具体代码展示: <!doctype html> <html> &

  • 如何实现星星评价（jquery.raty.js插件）

    1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4.js: function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径

  • JavaScript实现星星等级评价功能

    JavaScript实现星星等级评价功能

    本文实例为大家分享了js星星等级评价的具体代码,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ float:left; } .score{ float: left; position:

  • AngularJS实现星星等级评分功能

    星期六加班,教育后台也要有星级评分等级的需求,醉了--基本知道些怎么做,网上也随便找了找,没什么合意的,毕竟需求不同,也不能完全一样不是.学习之,改之╮(╯▽╰)╭ Directive  angular.module('XXX').directive('stars', stars); function stars() { var directive = { restrict: 'AE', template: '<ul class="rating" ng-mouseleave=&q

  • jQuery基于图层模仿五星星评价功能的方法

    本文实例讲述了jQuery基于图层模仿五星星评价功能的方法.分享给大家供大家参考.具体实现方法如下: <!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"&

  • iOS评分（评价）星星图打分功能

    iOS评分（评价）星星图打分功能

    下载地址:https://github.com/littleSunZheng/StarGradeView 起因:项目中往往涉及到用户的评分反馈,在我的"E中医"项目中,涉及到几处.对此我参考了美团和滴滴的评分图. 评分视图分为展示和评分两种: (1)多数情况下"评分功能"是要简介易用的.那种 星星准确显示百分比(分数)的功能反而不好用,这种多数用在显示评分上,不需要用户去点击,因为用户想评价"9.8分",手指头是不能准确点击的.但是显示的时候你根

  • JavaScript正则替换HTML标签功能示例

    JavaScript正则替换HTML标签功能示例

    本文实例讲述了JavaScript正则替换HTML标签功能.分享给大家供大家参考,具体如下: 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTag() { var regx = /<[^>]*>|<\/[^>]*>/gm; var tagStr = $("#ul_li").html(); alert("替换之前的字符串:"

  • javascript实现类似百度分享功能的方法

    javascript实现类似百度分享功能的方法

    本文实例讲述了javascript实现类似百度分享功能的方法.分享给大家供大家参考.具体如下: 像腾讯,开心社区都提供这种分享接口的,做百度分享功能很简单的 一般网站要接入分享功能,大部分都用百度分享和addthis的代码,可是自己定制性太差,该分享功能样式都可以自己修改,简洁没过多js代码,大大提高网页加载速度. 运行效果如下图所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

  • JavaScript实现弹出广告功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <span style="white-space:pre"> </span>var i=0;//记录次数 var timer;//定时器id //设置弹出广告 onload=function(){ //间隔四秒展示一次广告 timer = setInterval(showAd,4000); } //展示2秒以后隐藏广告的方法 function showAd(){ i++;//展示的次数加1 //若i等于3清空

  • JavaScript实现网页对象拖放功能的方法

    本文实例讲述了JavaScript实现网页对象拖放功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag</title> <meta http-equiv=

  • javascript中不提供sleep功能如何实现这个功能

    javascript中不提供sleep功能,而我们时长会用到这个功能. 有一种思路是跑一段循环体,让程序空耗CPU的时间来实现延时.这有一个不足,不同的机器CPU的执行速度是不一样的,这很容易导致的慢的机器会SLEEP很久. 笔者从别的论坛看到一种机智的解决方法,在不同的机器上的执行速度是一致的.在此与大家共享. 复制代码 代码如下: function sleep(n) { var start=new Date().getTime(); while(true) if(new Date().get

  • 使用JavaScript进行表单校验功能

    使用JavaScript进行表单校验功能

    文本框校验 以下是文本框的校验步骤. 1.获取待校验的文本框value值, 2.对value值设置判定条件,使用if语句或switch语句实现. 3. 若满足条件,则校验通过,返回值为true. 4. 若不满足条件则返回值为false,替换文本输出校验的提示信息. 5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件. 6. 在input中调用校验函数,我使用的是onblur事件触发校验函数. 下拉框校验 下拉框的校验相比文本框略有不同,下拉框中option

随机推荐