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实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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对微信支付回调处理的方法
2018/08/23 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
npm qs模块使用详解
2020/02/07 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python中类的一些方法分析
2014/09/25 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
思想品德自我评价
2014/02/04 职场文书
军神教学反思
2014/02/04 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
英文导游词
2015/02/13 职场文书
2015年党小组工作总结
2015/05/26 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery