首页
所有分类
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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
dtree 网页树状菜单及传递对象集合到js内，动态生成节点
Apr 14 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
js实现div色块碰撞
Jan 16 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
申请书(21) 城市猎人(1) 观后感(479) 波段(1) 文书(291) 实用文书(952) AngularJS(2) HAM-2000(1) explain(2) 西索(1)
You might like
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false)，remove()
2010/12/02 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
JavaScript编写的网页小游戏，很给力
2017/08/18 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python之web模板应用
2017/12/26 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Django中的AutoField字段使用
2020/05/18 Python
荷兰之家英文站：Holland at Home
2016/10/26 全球购物
英国马匹装备和马术用品购物网站：Equine Superstore
2019/03/03 全球购物
土耳其风格手工珠宝：Ottoman Hands
2019/07/26 全球购物
英国DIY和家居装饰领域的主要品牌：Wickes
2019/11/26 全球购物
我们的节日清明节活动总结
2014/04/30 职场文书
2014年保管员工作总结
2014/11/18 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
人口与计划生育责任书
2015/05/09 职场文书
十八大观后感
2015/06/12 职场文书
大学生村官入党自传
2015/06/26 职场文书
图书馆义工感想
2015/08/07 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
总结python多进程multiprocessing的相关知识
2021/06/29 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js