JS 多维度星级评论

最新推荐文章于 2022-05-15 09:52:58 发布
最新推荐文章于 2022-05-15 09:52:58 发布
阅读量440 收藏
点赞数
分类专栏： JS 文章标签： JS 多维度星级评论
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supingemail/article/details/48545131
版权

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

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

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


<!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" οnclick="return saveCommont()">
            评价
        </a>
    </div>
</div>
<body class="mainbg">
<div class="evaluating">
<div class="tab">
    <div class="col-50">
        <a href="javascript:" id="OK" οnclick="javascript:location.href='commont_class.htm'">
            课堂反馈
        </a>
    </div>
    <div class="col-50 current">
        <a href="javascript:" id="OK" οnclick="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" οnclick="return saveCommont()">
            提交评价
        </a>
    </div>

</body>
</html>

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

其实说起来也容易就是控制显示和隐藏的事情、

不多说、、、

记下，方便下次使用的时候直接拿来用。

实例下载：http://download.csdn.net/detail/supingemail/9117197

可以直接拿来使用。。。


supingemail
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（商品评价页）商品星级评分html+css+js
foolishma的博客
06-28 4311
html部分: <div class="evaluate_main"> <div class="evaluate_title"> <div class="line"></div> 我的评价 </div> <div class="evaluateP_info"> <div class="info_tit">
星级评分的实现
xm2by的博客
02-19 3522
星级评分的实现 星级评分是一种常见的打分方式，一般满分为5颗星，用户通过勾选星星的数量来给产品的某一维度进行打分，效果如下图所示： 当鼠标移动到某个星星上面时，当前星星及其前面的星星需处于激活状态；当鼠标移开时，所有星星恢复原状；只有当鼠标点击某个星星时，当前星星及其前面的星星处于激活状态，评分生效，此时鼠标移开时，星星状态不用恢复原状。 从上述分析可以看出，用到了鼠标进入、离开事件、以及点击事...
原生js多组星级评价
weixin_43403543的博客
09-01 297
所需图片： html <div class="starLevel"> <ul class="stars"> <li class="light star1"><a href="javascript:;">1</a></li> ...
js 写个 星级评分 可以多个评分项 并自定义星星数
weixin_43978604的博客
12-17 1194
模仿网站实现的多个星级评分 思路 点击事件 委托父级 数组分割 成多个评分项 （如最高5分 有三个评分项 就分三个数组） 点击 星星 实现 该星星归属项的评分 返回 评分项数组 效果图 （21世纪抽象分格 7颗星 评分） html 结构 &amp;amp;amp;lt;div class=&amp;amp;quot;stars-wrapper&amp;amp;quot;&amp;amp;amp;gt; /
JS 实现表单多条同样name的数据统计
Peak Xin's Blog
11-19 1007
在前端开发过程中，我们会遇到form表单中name值相同数据的计算，比如，在结算中，可添加多条结算数据 下面就以实际代码来解决这问题，此实例用了layui框架来获取表单的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v...
JS多星评论
09-18
以上是实现JS多维度星级评价系统的基本思路。在实际项目中，还需要考虑用户体验，如增加禁用状态（防止重复提交）、处理半星选择等。此外，对于响应式设计，还需要确保在不同设备和屏幕尺寸上都能正常工作。最后，别...
星级打分评价的小例子
07-28
总结来说，"星级打分评价的小例子"涵盖了前端交互设计、后端API开发、数据存储以及数据分析等多个IT技术领域。通过这个小项目，开发者可以学习到如何构建一个完整的用户反馈系统，而企业则能利用这个工具更好地了解...
layui单页面循环展示多个评分
cp_123321的博客
03-06 1235
<head> <meta charset="utf-8"> <title>laofan-Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1...
钉钉小程序星级评分组件
weixin_43930421的博客
05-15 387
前言 因为小程序引入了 colorUI 框架，请参照如下文章： https://blog.csdn.net/weixin_43930421/article/details/124748879 组件截图 代码实现 在 components 文件目录下新建 rate 组件。 rate.axml <view> <view> <text a:for="{{max}}" data-value="{{item}}" key="{{index
JS 获取某个时间距离现在时间有多少时分秒
草原孤狼的专栏
09-10 9926
好记忆不如按烂笔头... ... 以下这段代码是获取某个时间距离当前时间的天时分秒的数据。     function showTime(){         var timeStr = $("#classTime").html();  //获得的时间字符串.         if(timeStr==null || timeStr==''){             return;
DIV CSS 上下左右滑动
草原孤狼的专栏
07-17 8512
滑动框 的滚动示意图 div显示上下左右滚动条      这里是你要显示的内容 div显示上下滚动条的css代码 这里是你要显示的内容 div显示左右滚动条的css代码 这里是你要显示的内容 修改滚动条颜色的代码 SCROLLBAR-FACE-COLOR(立体滚动条凸出部分的颜色) SCROLLBAR-HIGHLIGHT-COLOR(滚动条空白部
HTML 七牛上传图片
草原孤狼的专栏
09-15 6607
好记忆不如按烂笔头 ... ... 简介 七牛图片云存储，云操作做的还是很牛叉的，http://www.qiniu.com/ 没有为人打广告的意思. 给你一个上传图片的token ,就能往上面放置你的图片了. 准备工作 首先需要得在 http://www.qiniu.com/ 注册一个账号，得有个token ，否则是不能上传图片的， 实现 其次就是上传图片的代码，看主要代码
jQuery Ajax 跨域请求
草原孤狼的专栏
09-06 3425
好记忆不如按烂笔头... ... 今天接到一个项目，让通过ajax 的方式去访问南方某公司，某系统的数据，所有东东都在html上展示，没有后台的操作。 给定了个url，规定传递的参数，其他就没有其他了，哥也不管那么多了，直接在html上写个ajax ，直接调用： $(function(){         $("#login").click(function(){
JS 获取HTML之间的传输的参数的值.
草原孤狼的专栏
09-07 2536
好记忆不如按烂笔头... ... 在一般的应用之中，HTML 与 HTML 的跳转涉及的不是很多，基本都会是动态的，但是要是 真的遇到了，那也得好好的的对待。 那么如何在HTML之中，实现参数的传递呐 ? 主要代码如下：request为方法名称，params 为要获取的参数。     function request(params) {         var url =
JS 设置 Cookie
草原孤狼的专栏
09-22 1171
好记忆不如按烂笔头，再简单的东西，都是知识，需要有所笔记... 最近一直在搞JS ，今天写了个js cookie 的实现，贴出来，学习学习、、、 /* * 设置 cookie 的值. */ function addCookie(objName, objValue,objTime,tag){//添加cookie     var str = objName + "=" + escape(
JSP JS 使用
草原孤狼的专栏
08-01 727
查看
JS 正则常用验证
草原孤狼的专栏
09-14 648
好记忆不如按烂笔头 ... ... 整理了下 JS 验证常用的验证，把他整理出来，方便使用和查看。。。 //check the user's input value . /** 1.new RegExp("");  直接使用,有""的！ 只能输入数字："^[0-9]*$"。                                  var temp = new RegExp(
禁止Enter 键来提交表单
草原孤狼的专栏
07-24 641
找了半天，再看了下文档，写了个函数，用来禁止         function keyDown()         {         var keycode=event.keyCode;         var keyChar=String.fromCharCode(keycode);         if(event.keyCode==13 && event.srcEleme
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值