js实现五星评价功能的实例-js教程-PHP中文网

本文主要介绍了js实现五星评价功能和印象评价功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧
效果图：
代码如下：
html>


  <meta>
  <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><p>
  </p><h4>给“新闻订单”的评价</h4>
  <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5980" title="javascript-pro"><img
														src="https://img.php.cn/upload/skill/000/000/081/179074807567238.jpg" alt="javascript-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="overflowclass">javascript-pro</a>
													<p class="overflowclass">专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <p>
    </p>