首页
所有分类
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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
深入探寻javascript定时器
Jan 02 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
javascript RegExp 使用说明
May 21 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
js实现表格筛选功能
Jan 18 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
shiro授权的实现原理
Sep 21 Javascript
如何更好的编写js async函数
May 13 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 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
曝光融合(1) shell脚本(1) pycryto(1) 数据加密(1) 连接器(1) key(1) HDR(1) 公共键(1) 有序排列(1) kafka(2)
You might like
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
入门基础学习 ExtJS笔记（一）
2010/11/11 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
喜大普奔！jQuery发布 3.0 最终版
2016/06/12 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
解析js如何获取css样式
2016/12/11 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Python实现发送QQ邮件的封装
2017/07/14 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python高级property属性用法实例分析
2019/11/19 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
名词解释型面试题(主要是网络)
2013/12/27 面试题
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
结婚通知短信大全
2015/04/17 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
慰问信（范文3篇）
2019/10/23 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript