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 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
JS实现购物车特效
Feb 02 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
JS中的函数与对象的创建方式
May 12 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
小程序实现短信登录倒计时
2019/07/12 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
艺术设计专业毕业生推荐信
2014/07/08 职场文书
作风建设整改方案
2014/10/27 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers