JS 多维度星级评论

最新推荐文章于 2022-05-15 09:52:58 发布

原创最新推荐文章于 2022-05-15 09:52:58 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS 多维度星级评论

JS 专栏收录该内容

14 篇文章

订阅专栏

好记忆不如烂笔头... ...

最近被拉去做前端，接了个活，特别的恶心、真的是砖呀、、、

言归正传，说说怎么实现：多维度的星级评论，下面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>评价老师</title>
    <meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/common.js"></script>
</head>

<style type="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:200px;margin:10px auto 10px;}
.li{float:left;width:26px;height:20px;background:url(images/star.png) 0 -20px no-repeat;}
span{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;}
</style>

<script type="text/javascript">

   var uid = decodeURI(request("uid"));
   if (uid==null || uid=='') {
       uid = 5740;
   }

   function saveCommont(){
       var demeanor = $("#attitude").val();
       var skill = $("#way").val();
       var atmosphere = $("#atmosphere").val();
       var achievement = $("#gains").val();
       var timeM = $("#rhythm").val();
       var pronunciation = $("#pronunciation").val();
       var corrections = $("#error").val();
       console.log("demeanor="+demeanor+",skill="+skill+",atmosphere="+atmosphere+",achievement="+achievement+",timeM="+timeM+",pronunciation="+pronunciation+",corrections="+corrections);
       if (demeanor==null || demeanor=='') {
           alert("行为不允许为空!");
           return false;
       }
       if (skill==null || skill=='') {
           alert("技能不允许为空!");
           return false;
       }
       if (atmosphere==null || atmosphere=='') {
           alert("气氛不允许为空!");
           return false;
       }
       if (achievement==null || achievement=='') {
           alert("完成度不允许为空!");
           return false;
       }
       if (timeM==null || timeM=='') {
           alert("时间控制不允许为空!");
           return false;
       }
       if (pronunciation==null || pronunciation=='') {
           alert("发音不允许为空!");
           return false;
       }
       if (corrections==null || corrections=='') {
           alert("纠错不允许为空!");
           return false;
       }

       $.ajax({
             url:"http://api.121learn.com/api/v1/teacher/rate",
              type: "POST",
              dataType:"json",
              data:{"uid":uid,"demeanor":demeanor,"skill":skill,"atmosphere":atmosphere,"achievement":achievement,"timeM":timeM,"pronunciation":pronunciation,"corrections":corrections},
              async: false,
              headers: {
               "Authorization":"Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a",
               "Content-Type":"application/x-www-form-urlencoded"
              },
              success:function(object){
                if (object.success==true) {
                    alert("评论成功!");
                    return true;
                }else{
                    alert(object.msg);
                    return false;
                }
            },
            error: function() {
               alert(" bad request!");
               return false;
            }
        });
       return false;
};

//onload.
$(function(){
   var array = ["attitude","way","atmosphere","gains","rhythm","pronunciation","error"];
   for (var i = 0; i <array.length; i++) {
       var instance = array[i];
       console.log(instance);
       var star = $("#teacher_"+instance+" > ul > li");
       var oDiv = $("#teacher_"+instance+" > ul")[0];
       showStar(star,oDiv,instance);
   }
});

//show style.
function showStar(star,oDiv,instance){
   var temp = 0;
   for(var i = 0, len = star.length; i < len; i++){
       star[i].index = i;
       star[i].onmouseover = function(){
           clear();
           for(var j = 0; j < this.index + 1; j++){
               star[j].style.backgroundPosition = '0 0';
           }
       }
       star[i].onmouseout = function(){
           for(var j = 0; j < this.index + 1; j++){
               star[j].style.backgroundPosition = '0 -20px';
           }
           current(temp);
       }
       star[i].onclick = function(){
           temp = this.index + 1;
           $("#"+instance).val(temp);
           current(temp);
       }
   }
   //清除所有
   function clear(){
       for(var i = 0, len = star.length; i < len; i++){
           star[i].style.backgroundPosition = '0 -20px';
       }
   }
   //显示当前第几颗星
   function current(temp){
       for(var i = 0; i < temp; i++){
           star[i].style.backgroundPosition = '0 0';
       }
   }
};

</script>

<div class="nav">
   <div class="title">
       <a href="javascript:" id="OK" onclick="return saveCommont()">
           评价
       </a>
   </div>
</div>
<body class="mainbg">
<div class="evaluating">
<div class="tab">
   <div class="col-50">
       <a href="javascript:" id="OK" onclick="javascript:location.href='commont_class.htm'">
           课堂反馈
       </a>
   </div>
   <div class="col-50 current">
       <a href="javascript:" id="OK" onclick="javascript:location.href='commont_teacher.htm'">
           评价老师
       </a>
   </div>
</div>

<div class="tabcon">
<div class="">
   <p class="ftsty-6">          我们致力于提供优质的在线英语教育服务，为了评估老师的教学质量，为了给您提供更好的服务，请您评价一下老师这堂课的表现吧！
   </p>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">授课态度</div>

<div class="col-70">
<div class="row">
   <div class="col-50" id="teacher_attitude">
       <ul class="wrapper">
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
       </ul>
       <span id="attitude"></span>
   </div>
</div>
</div>
</div>

<div class="row choses margin-top-20">
<div class="col-30 title">授课方式</div>
<div class="col-70">
<div class="row">
   <div class="col-50" id="teacher_way">
       <ul class="wrapper">
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
       </ul>
       <span id="way"></span>
   </div>
</div>
</div>
</div>
<div class="row choses margin-top-20">
<div class="col-30 title">课堂氛围</div>
<div class="col-70">
<div class="row">
   <div class="col-50" id="teacher_atmosphere">
       <ul class="wrapper">
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
       </ul>
       <span id="atmosphere"></span>
   </div>
</div>

</div>
</div>

<div class="row choses margin-top-20">
<div class="col-30 title">课堂收获</div>
<div class="col-70">
<div class="row">
   <div class="col-50" id="teacher_gains">
       <ul class="wrapper">
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
       </ul>
       <span id="gains"></span>
   </div>
</div>

</div>
</div>

<div class="row choses margin-top-20">
<div class="col-30 title">上课节奏</div>
<div class="col-70">
<div class="row">
   <div class="col-50" id="teacher_rhythm">
       <ul class="wrapper">
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
       </ul>
       <span id="rhythm"></span>
   </div>
</div>

</div>
</div>

<div class="row choses margin-top-20">
<div class="col-30 title">老师发音</div>
<div class="col-70">
<div class="row">
   <div class="col-50" id="teacher_pronunciation">
       <ul class="wrapper">
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
       </ul>
       <span id="pronunciation"></span>
   </div>
</div>

</div>
</div>

<div class="row choses margin-top-20">
<div class="col-30 title">适时纠错</div>
<div class="col-70">
<div class="row">
   <div class="col-50" id="teacher_error">
       <ul class="wrapper">
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
           <li class="li"></li>
       </ul>
       <span id="error"></span>
   </div>
</div>

</div>
</div>

</div>
</div>
</div>
<div class="tabcon">

</div>

</div>
   <div class="subimt">
       <a href="javascript:" id="OK" onclick="return saveCommont()">
           提交评价
       </a>
   </div>

</body>
</html>

需要的是一个图片和jquery的文件就OK了。