<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>

<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>
												


											
js  实现仿  淘宝 五星评价   demo的更多相关文章
	

    
								
  1. JS仿淘宝星星评价
		
    //直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
    
		
    2. 
						
  2. 原生js仿淘宝手机购买选项代码
		
    这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
    
		
    3. 
						
  3. JS仿淘宝详情页菜单条智能定位效果
		
    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
    
		
    4. 
						
  4. JS 仿淘宝幻灯片 非完整版 小案例
		
    仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
    
		
    5. 
						
  5. 基于Bootstrap仿淘宝分页控件实现
		
    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
    
		
    6. 
						
  6. jquery仿淘宝规格颜色选择效果
		
    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
    
		
    7. 
						
  7. 一款基于jQuery仿淘宝红色分类导航
		
    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...
    
		
    8. 
						
  8. Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；
		
    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...
    
		
    9. 
						
  9. 仿淘宝头像上传功能（三）——兼容 IE6 浏览器。
		
    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Centos7 Firewall
			
    1.1 firewall启停设置 [root@tomcat ~]# systemctl stop firewalld.service #关闭firewall [root@tomcat ~]# syst ...
    
			
    2. 
						
  2. js判断数组是否有重复值
			
    function isRepeat(arr) { var hash = {}; for(var i in arr) { if(hash[arr[i]]) return true; hash[arr[i ...
    
			
    3. 
						
  3. Windows Message ID 常量列表大全
			
    namespace WindowsUtilities{    public enum WindowsMessages : int    {        WM_NULL = 0x0000,       ...
    
			
    4. 
						
  4. java-js知识库之一——canvas绘制9*9乘法表
			
    不知不觉一年又要过去了,软件这一行入坑快两年了,一直不知道这两年干了些啥,也不知道自己到底会些什么,工作也是些简单的东西,谁都能做,对未来也是很茫然.今天和同事优化数据库,头都是懵的,很多东西都感觉似 ...
    
			
    5. 
						
  5. winfrom窗体中嵌套WPF控件
			
    前言 本文主要介绍如何在winfrom窗体中嵌套WPF控件, 一来是自己记录一下,而来希望能对有需要的朋友提供实现思路. 如有错误请指出...下面进入正题... -1.前期准备 准备一个建立好的win ...
    
			
    6. 
						
  6. SQL中的with check option（转）
			
    student表: 95001 李勇 男 20 CS 95002 刘晨 女 21 IS 95003 王敏 女 18 MA 95004 张力 男 19 IS 建立视图IS_STUDENT显示“IS”系所 ...
    
			
    7. 
						
  7. install openjdk & tomcat on the centos
			
    1.检查当前服务器是否已安装openjdk
    
			
    8. 
						
  8. DevExpress ASP.NET Core Controls 2019发展蓝图（No.3)
			
    本文主要为大家介绍DevExpress ASP.NET Core Controls 2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...
    
			
    9. 
						
  9. jQuery  入口函数主要有4种写法
			
    jqery  入口函数主要有4种写法,其中以第3种方法最为方便. <!DOCTYPE html> <html lang="en"> <head> ...
    
			
    10. 
						
  10. Spring4中使用通用Mapper
			
    1.  在Spring4中使用通用Mapper Spring4增加了对泛型注入的支持,这个特性对通用Mapper来说,非常的有用,可以说有了这个特性,可以直接在Service中写Mapper<U ...
    
			
    11.