首页
所有分类
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版DateAdd和DateDiff函数代码
Mar 01 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
javascript中new关键字详解
Dec 14 Javascript
图解js图片轮播效果
Dec 20 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 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
GZIP(2) 磁盘分区(1) 事务并发(1) DBLink(1) .NET Framework(2) 复读(1) MVCC(4) IIS7(1) 幻读(5) innoDB(3)
You might like
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
php制作文本式留言板
2015/03/18 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
php实现查询功能（数据访问）
2017/05/23 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
js取模（求余数）隔行变色
2014/05/15 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
常见的浏览器存储方式（cookie、localStorage、sessionStorage）
2019/05/07 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python实现命令行通讯录实例教程
2016/08/18 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
毕业生求职的求职信
2013/12/05 职场文书
保险公司年会主持词
2014/03/22 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python