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 相关文章推荐
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
JS实现瀑布流布局
Oct 21 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
js实现返回顶部效果
2017/03/10 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python中的pack和unpack的使用
2018/03/12 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python中的时区问题
2021/01/14 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
struct与class的区别
2014/02/03 面试题
GWT都有什么特性
2016/12/02 面试题
感恩的演讲稿
2014/05/06 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书