首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现五星评价功能

Posted in Javascript onMarch 08, 2017

效果图：

js实现五星评价功能

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>五星评价</title>
  <style>
    @font-face {
      font-family: 'iconfont'; /* project id 247957 */
      src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot');
      src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.woff') format('woff'),
      url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.svg#iconfont') format('svg');
    }
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }
    body{
      font-family: "microsoft yahei";
    }
    ul,li{
      list-style: none;
      padding:0;
      margin:0;
    }
    a{
      text-decoration: none;
    }
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .order-evaluation {
      width: 827px;
      border: 2px solid #E84E40;
      background: #fff;
      z-index: 200;
      margin:50px auto;
    }
    .order-evaluation{
      padding:22px;
    }
    .order-evaluation h4{
      font-size:18px;
      color:#333333;
      padding-bottom:20px;
      border-bottom:1px dashed #dbdbdb;
    }
    .order-evaluation p{
      font-size:14px;
      color:#999;
      line-height:45px;
      margin-bottom:0;
    }
    .order-evaluation .order-evaluation-text{
      font-size:16px;
      color:#333;
      line-height:40px;
      width:809px;
      padding-left:15px;
      background:#f3f3f3;
      margin-bottom:25px;
      margin-top:20px;
    }
    .order-evaluation-checkbox ul li{
      width:142px;
      height:43px;
      border:1px solid #e8e8e8;
      text-align: center;
      background: #fff;
      font-size:14px;
      color:#333333;
      line-height:43px;
      margin-right:25px;
      margin-bottom:25px;
      float:left;
      cursor: pointer;
      overflow: hidden;
      position:relative;
    }
    .order-evaluation-checkbox ul li.checked i{
      display: block;
    }
    .order-evaluation-checkbox ul li.checked{
      border:1px solid #e84c3d;
    }
    .order-evaluation .order-evaluation-textarea{
      position:relative;
      width: 784px;
      height: 210px;
    }
    .order-evaluation .order-evaluation-textarea textarea{
      width:793px;
      height:178px;
      border:1px solid #e8e8e8;
      position:absolute;
      top:0;
      left:0;
      line-height:22px;
      padding:15px;
      color:#666;
    }
    .order-evaluation .order-evaluation-textarea span{
      position:absolute;
      bottom:10px;
      font-size:12px;
      color:#999;
      right:10px;
    }
    .order-evaluation .order-evaluation-textarea span em{
      color:#e84c3d;
    }
    .order-evaluation>a{
      width:154px;
      height:48px;
      border-radius: 6px;
      display: block;
      text-align: center;
      line-height:48px;
      background:#f36a5a;
      float:right;
      margin-top:20px;
      color:#fff;
      font-size:14px;
    }
    .order-evaluation-checkbox ul li i {
      display: none;
      color: #e84c3d;
      position: absolute;
      right: -4px;
      bottom: -14px;
      font-size: 20px;
    }
    .order-evaluation>a:hover{
      background: #e84c3d;
    }
    .block li label,.con span{ font-size: 18px; margin-right: 20px; line-height: 23px;}
    .block li span{display: inline-block; vertical-align: middle; cursor: pointer;}
    .block li span img{margin-right: -5px; }
    .level{color:#e84c3d;font-size:16px;margin-left:15px;position: relative;top: 3px;}
    .dmlei_tishi_info{
      height:70px;border-radius: 10px;background: rgba(0,0,0,0.5);font-size:18px;color:#fff;text-align: center;line-height: 70px;position:fixed;
      left: 48%;
      display: none;
      margin-left: -128px;
      top: 40%;
      margin-top: -35px;
      padding: 0 15px;
      z-index: 1000;
    }
  </style>
</head>
<body>
<div class="order-evaluation clearfix">
  <h4>给“新闻订单”的评价</h4>
  <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
  <div class="block">
    <ul>
      <li data-default-index="0">
            <span>
              <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png">
              <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png">
              <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png">
              <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png">
              <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png">
            </span>
        <em class="level"></em>
      </li>
    </ul>
  </div>
  <div class="order-evaluation-text">
    本次交易，乖，摸摸头 给您留下了什么印象呢？
  </div>
  <div class="order-evaluation-checkbox">
    <ul class="clearfix">
      <li class="order-evaluation-check" data-impression="1">专业水平高<i class="iconfont icon-checked">?</i></li>
      <li class="order-evaluation-check" data-impression="2">交付准时<i class="iconfont icon-checked">?</i></li>
      <li class="order-evaluation-check" data-impression="3">效果明显<i class="iconfont icon-checked">?</i></li>
      <li class="order-evaluation-check" data-impression="4">数据分析准确<i class="iconfont icon-checked">?</i></li>
      <li class="order-evaluation-check" data-impression="5">能力待提高<i class="iconfont icon-checked">?</i></li>
      <li class="order-evaluation-check" data-impression="6">工期延误<i class="iconfont icon-checked">?</i></li>
    </ul>
  </div>
  <div class="order-evaluation-textarea">
    <textarea name="content" id="TextArea1" onkeyup="words_deal();" ></textarea>
    <span>还可以输入<em id="textCount">140</em>个字</span>
  </div>
  <a href="javascript:;" rel="external nofollow" id="order_evaluation">评价完成</a>
</div>
<div id="order_evaluate_modal" class="dmlei_tishi_info"></div>
</body>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  /*
   * 根据index获取 str
   * **/
  function byIndexLeve(index){
    var str ="";
    switch (index)
    {
      case 0:
        str="差评";
        break;
      case 1:
        str="较差";
        break;
      case 2:
        str="中等";
        break;
      case 3:
        str="一般";
        break;
      case 4:
        str="好评";
        break;
    }
    return str;
  }
  // 星星数量
  var stars = [
['x2.png', 'x1.png', 'x1.png', 'x1.png', 'x1.png'],
    ['x2.png', 'x2.png', 'x1.png', 'x1.png', 'x1.png'],
    ['x2.png', 'x2.png', 'x2.png', 'x1.png', 'x1.png'],
    ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x1.png'],
    ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x2.png'],
  ];
  $(".block li").find("img").hover(function(e) {
    var obj = $(this);
    var index = obj.index();
    if(index < (parseInt($(".block li").attr("data-default-index")) -1)){
      return ;
    }
    var li = obj.closest("li");
    var star_area_index = li.index();
    for (var i = 0; i < 5; i++) {
      li.find("img").eq(i).attr("src", "http://7xnlea.com2.z0.glb.qiniucdn.com/" + stars[index][i]);//切换每个星星
    }
    $(".level").html(byIndexLeve(index));
  }, function() {
  })
  $(".block li").hover(function(e) {
  }, function() {
    var index = $(this).attr("data-default-index");//点击后的索引
    index = parseInt(index);
    console.log("index",index);
    $(".level").html(byIndexLeve(index-1));
    console.log(byIndexLeve(index-1));
    $(".order-evaluation ul li:eq(0)").find("img").attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png");
    for (var i=0;i<index;i++){
      $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x2.png");
    }
  })
  $(".block li").find("img").click(function() {
    var obj = $(this);
    var li = obj.closest("li");
    var star_area_index = li.index();
    var index1 = obj.index();
    li.attr("data-default-index", (parseInt(index1)+1));
    var index = $(".block li").attr("data-default-index");//点击后的索引
    index = parseInt(index);
    console.log("index",index);
    $(".level").html(byIndexLeve(index-1));
    console.log(byIndexLeve(index-1));
    $(".order-evaluation ul li:eq(0)").find("img").attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x1.png");
    for (var i=0;i<index;i++){
      $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","http://7xnlea.com2.z0.glb.qiniucdn.com/x2.png");
    }
  });
  //印象
  $(".order-evaluation-check").click(function(){
    if($(this).hasClass('checked')){
      //当前为选中状态，需要取消
      $(this).removeClass('checked');
    }else{
      //当前未选中，需要增加选中
      $(this).addClass('checked');
    }
  });
  //评价字数限制
  function words_deal()
  {
    var curLength=$("#TextArea1").val().length;
    if(curLength>140)
    {
      var num=$("#TextArea1").val().substr(0,140);
      $("#TextArea1").val(num);
      alert("超过字数限制，多出的字将被截断！" );
    }
    else
    {
      $("#textCount").text(140-$("#TextArea1").val().length);
    }
  }
  $("#order_evaluation").click(function(){
    $("#order_evaluate_modal").html("感谢您的评价！么么哒(* ￣3)(ε￣ *)").show().delay(3000).hide(500);
  })
</script>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现五星评价功能

- Author -

994399414

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
Oct 24 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
ionic2 tabs 图标自定义实例
Mar 08 #Javascript
微信小程序 弹窗自定义实例代码
Mar 08 #Javascript
jQuery实现图片滑动效果
Mar 08 #Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 #Javascript
JS实现根据密码长度显示安全条功能
Mar 08 #Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 #Javascript
bootstrap实现动态进度条效果
Mar 08 #Javascript
Next.js(1) most_common(1) set(1) SingleFlight(2) 并发(8) frozenset(1) 脚手架(2) 字典(3) Counter(1) pip(1)
You might like
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
javascript制作2048游戏
2015/03/30 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
[00:19]CN DOTA NEVER DIE！VG夺冠rOtK接受采访
2019/12/23 DOTA
Python中数字以及算数运算符的相关使用
2015/10/12 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python删除过期log文件操作实例解析
2018/01/31 Python
TensorFlow变量管理详解
2018/03/10 Python
python如何定义带参数的装饰器
2018/03/20 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python判断单向链表是否包括环，若包含则计算环入口的节点实例分析
2019/10/23 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
家长给孩子的评语
2014/01/30 职场文书
促销活动计划书
2014/05/02 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
企业挂职心得体会
2014/09/10 职场文书
医院感染管理制度
2015/08/05 职场文书
导游词之井冈山
2019/11/20 职场文书