最近的《微课堂》项目中，有老师录入学生成绩的需求。为了让成绩录入的功能更加方便，使用了js，现分享给大家。效果在构思和写作之前，我们首先要做的就是知道我们要达到什么样的效果。先来看看我们想要的效果（既然最终达到了想要的效果，还是用成品来展示一下吧）这是记录录入界面的控制按钮，点击进入记录录入界面。这是输入成绩的界面。老师在这里输入平时成绩和期末成绩后，平时成绩、期末成绩和总成绩就会保存在数据表中。点击框后可以编辑，点击框外，编辑完成，立即保存，立即计算总分。考虑到不同的老师会对平时成绩和考试成绩赋予不同的权重，所以增加了选择权重的功能，并且因为权重的比例一般没有个位数，所以提供给用户选择函数，而不是inputweights，相比之下选择更省时省心省力。实现1.执行方法，失去焦点后编辑窗体要实现点击时编辑和离开后保存的功能，我们需要用到一个方法“onblur()”下面是它的用法：onblur使用方法一般情况下面,表格的内容无法编辑。为了保证整体的美观性和实用性，我们编辑表单而不是输入框。这里我们编辑它的属性，即：“contenteditable="true"”修改属性后，就可以进行编辑了。2.方法执行完后保存在我的代码中。autoSave()和finalSave()两个方法分别用于保存通常的结果和测试结果。当然，这两个方法是我自己乱命名的。通常分数id}">{$score->usual_score}考试成绩id}">{$score->exam_score}下面看看js方法保存分数函数autoSave(event){constid=event.target.id;constusualValue=event.target.textContent;$.post("/index/teacher/usualScore?",{id:id,usualvalue:usualValue},function(result){totalAchievements(id);});}eventevent接口id和value是要传给后台的参数值，post是指使用post方法传值，路径是“/index/teacher/usualScore”，所以我们需要后台构建“usualScore()”方法，“？”后面的参数都是要传输的参数。我们看一下后台方法publicfunctionusualScore(){$data=Request::instance()->param();$id=$data['id'];$value=$data['usualvalue'];$Score=Score::get($id);$Score->usual_score=$value;$分数->保存();}$data接收所有参数，然后找到id对应的对象，赋值保存。考试成绩和总分的写法和平时的成绩一样，这里就不一一介绍了。3、权重的选择与计算请选择通常结果的权重30%10%20%40%50%“onchange()”方法是指一旦改变，该方法就会执行，这里执行“reload()”方法。functionreload(){获取权重();在里面（）;}“reload()”方法调用了“obtainWeight()”和“init()”这两个方法。functionobtainWeight(event){letusual=document.getElementsByClassName('usual');让weightNode=document.getElementById("通常");让examNode=document.getElementById('exam');letindex=weightNode.selectedIndex;value=weightNode.options[index].value;//使用url跳转将term节点的值传到后台leturl="/index/teacher/getWeight?usualScore="+value;ajaxGet(url,function(response){console.log(response);clear(examNode);createOption(examNode,response);totalAchievements();});//调用creatOption方法}“document.getElementsByClassName()”是通过Class的名称获取节点，“document.getElementsById()”是指通过id获取节点，使用“value”表示value获取node，然后定义url，指明方法和参数，使用ajaxGet()方法跳转传值。functionajaxGet(url,callback){$.ajax({url:url,type:"get",//成功后调用成功后的语句success:function(response){callback(response);},//失败后错误error后调用语句：function(xhr){console.log('servererror');}});url是指用户定义的url，如果没有参数，直接指定路径即可，type是指传值一般有两种方式：“post”和“get”。Success()和error()指的是返回的数据。如果成功，将返回参数。如果不成功，则显示“错误”内容。//获取前台传入的平时成绩的权重值，计算考试成绩的权重值返回给前台publicfunctiongetWeight(){$usualScore=Request::instance()->param('usualScore');$examScore=100-($usualScore*100).'%';返回$examScore；现在我们再来看看后端的代码。$usualScore代表平时成绩的权重，计算出考试成绩的权重后返回给前台。functioncreateOption(node,inners,values){让examScore=document.createElement('option');examScore.name=node;examScore.innerHTML=内部；node.appendChild（examScore）；成绩的权重没有
