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 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
webpack打包多页面的方法
Nov 30 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
正则表达式基础与常用验证表达式
Jun 16 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
python 模块导入问题汇总
2021/02/01 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
经济系大学生求职信
2013/10/01 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
入党申请书怎么写?
2019/06/11 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python