javascript实现评分功能


Posted in Javascript onJune 24, 2020

本文实例为大家分享了js实现评分功能的具体代码,供大家参考,具体内容如下

实现的效果如下:

javascript实现评分功能

具体代码如下:

html部分:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./index.css" >

 <title>评分</title>
</head>

<body>
 <div id="starRating">
  <p class="photo">
  <span><i class="high"></i><i class="nohigh"></i></span>
  <span><i class="high"></i><i class="nohigh"></i></span>
  <span><i class="high"></i><i class="nohigh"></i></span>
  <span><i class="high"></i><i class="nohigh"></i></span>
  <span><i class="high"></i><i class="nohigh"></i></span>
  </p>
  <p class="starNum">0.0分</p>
  <div class="bottoms">
  <a class="garyBtn cancleStar">取消评分</a><a class="blueBtn sureStar">确认</a>
 </div>

 </div>
 <script src="./jquery.js"></script>
 <script src="./index.js"></script>

</body>

</html>

CSS部分:

#starRating .photo span{
 position: relative;
 display: inline-block;
 width: 44px;
 height: 42px;
 overflow: hidden;
 margin-right: 23px;
 cursor: pointer;
 /* border: 1px solid black; */
}
#starRating .photo span:last-child{
 margin-right: 0px;
}
#starRating .photo span .nohigh{
 position: absolute;
 width: 44px;
 height: 42px;
 top: 0;
 left: 0;
 background: url(./star.png);
}
#starRating .photo span .high {
 position: absolute;
 width: 44px;
 height: 42px;
 top: 0;
 left: 0;
 background: url(./star1.png);
}
#starRating .starNum {
 font-size: 26px;
 color: #de4414;
 margin-top: 4px;
 margin-bottom: 10px;
}
#starRating .photo{
 margin-top: 30px;
}
#starRating .bottoms a {
 margin-bottom: 0;
}
#starRating .bottoms .garyBtn {
 margin-right: 57px!important;
}
#starRating .bottoms a {
 width: 130px;
 height: 35px;
 line-height: 35px;
 border-radius: 3px;
 display: inline-block;
 font-size: 16px;
 transition: all 0.2s linear;
 margin: 16px 0 22px;
 text-align: center;
 cursor: pointer;
}
.garyBtn {
 margin-right: 60px!important;
 background-color: #e1e1e1;
 color: #999999;
}
.blueBtn {
 background-color: #1968b1;
 color: #fff;
}
.blueBtn:hover {
 background: #0e73d0;
}

index.js

$(function () {
 //评分
 var starRating = 0;
 //鼠标移入
 $('.photo span').on('mouseenter', function () {
  var index = $(this).index() + 1;
  $(this).prevAll().find('.high').css('z-index', 1);
  $(this).find('.high').css('z-index', 1);
  $(this).nextAll().find('.high').css('z-index', 0);
  $('.starNum').html((index * 2).toFixed(1) + '分');
 });
 //鼠标离开
 $('.photo').on('mouseleave', function () {
  $(this).find('.high').css('z-index', 0);
  var count = starRating / 2;
  console.log(count);
  if (count == 5) {
   $('.photo span').find('.high').css('z-index', 1);
  } else {
   $('.photo span').eq(count).prevAll().find('.high').css('z-index', 1);
  }
  $('.starNum').html(starRating.toFixed(1) + '分')
 }),
  //点击
  $('.photo span').on('click', function () {
   var index = $(this).index() + 1;
   $(this).prevAll().find('.high').css('z-index', 1)
   $(this).find('.high').css('z-index', 1);
   starRating = index * 2;
   $('.starNum').html(starRating.toFixed(1) + '分');
   //alert('评分:' + (starRating.toFixed(1) + '分'))
  });
  //取消评分
  $('.cancleStar').on('click',function () {
   starRating = 0;
   $('.photo span').find('.high').css('z-index',0);
   $('.starNum').html(starRating.toFixed(1)+'分');
  });
  //确定评分
  $('.sureStar').on('click',function () {
   if(starRating===0) {
    alert('最低一颗星!');
   } else {
    alert('评分:'+(starRating.toFixed(1)+'分'))
   }
  })
})

图片stat.png和stat1.png分别如下

javascript实现评分功能

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

Javascript 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
document.getElementById介绍
Sep 13 Javascript
详解js闭包
Sep 02 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
javascript实现移动端红包雨页面
Jun 23 #Javascript
JS实现canvas简单小画板功能
Jun 23 #Javascript
javascript+Canvas实现画板功能
Jun 23 #Javascript
vue.js实现照片放大功能
Jun 23 #Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 #Javascript
vue.js实现双击放大预览功能
Jun 23 #Javascript
vue实现分页的三种效果
Jun 23 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php MySQL与分页效率
2008/06/04 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
教你安装python Django(图文)
2013/11/04 Python
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
回门宴新郎答谢词
2014/01/12 职场文书
数控机床专业自荐信
2014/05/19 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书