首页
所有分类
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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
javascript函数特点实例分析
May 14 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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
捷克购物网站(26) 秘鲁购物网站(1) 菲律宾购物网站(13) 越南购物网站(9) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 卡塔尔购物网站(3) 北美洲购物网站(1) 新西兰购物网站(42) 缅甸购物网站(1)
You might like
php 变量定义方法
2009/06/14 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
js实现简易计算器功能
2019/10/18 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
英国最大的正宗复古足球衫制造商和零售商：TOFFS
2018/06/21 全球购物
JPA的特点
2014/10/25 面试题
化工专业自荐书
2014/06/16 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL
Android Studio 计算器开发
2022/05/20 Java/Android