使用JavaScript实现GPA计算器（学科实践任务一）

刺骨的言语ヽ痛彻心扉 2023-10-03 17:41 1阅读 0赞

### 学科实践任务(一)：GPA计算器 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>使用js实现GPA计算</title>
    		<style>
    		#GPAForm{
        
    			text-align: center;
    		}
    		.title{
        
    			text-align: center;
    			color: #FF0000;
    		}
    		table.courses{
        
    			text-align: center;
    			border-collapse:collapse;
    		}
    		th{
        
    			background-color: lightblue;
    		}
    		.point, .gradePoint, #totalGradePoint, #totalCredit, #gpa{
        
    			cursor: default;
    			border: 0px;
    			border-bottom: red solid 1px;
    			background-color: inherit;
    			text-align: center;
    		}
    		.addCourse_btn{
        
    			background-color: greenyellow;
    		}
    		.removeCourse_btn{
        
    			background-color: yellow;
    		}
    		</style>
    		
    		<script type='text/javascript'>
    		
    		function getCredit(credit){
        
    			UpdataGradePoint(credit.parentNode.parentNode);
    			UpdataTotalCredit();			//更新学分
    			UpdataTotalGradePoint();		//更新总学分绩点
    			UpdataGPA();					//更新GPA
    			}
    		function getScore(Elem){
        
    			score = Number(Elem.value);
    			var point;
    			if(score > 100)alert("请在正确范围内输入");
    			else if(score >= 90){
        
    				point = 4.0;
    			}
    			else if(score >= 87){
        
    				point = 3.7;
    			}
    			else if(score >= 84){
        
    				point = 3.4
    			}
    			else if(score >= 81){
        
    				point = 3.0;
    			}
    			else if(score >= 78){
        
    				point = 2.7;
    			}
    			else if(score >= 75){
        
    				point = 2.4;
    			}
    			else if(score >= 72){
        
    				point = 2.1;
    			}
    			else if(score >= 68){
        
    				point = 1.7;
    			}
    			else if(score >= 64){
        
    				point = 1.3;
    			}
    			else if(score >= 60){
        
    				point = 1.0;
    			}
    			else if(score >= 0){
        
    				point = 0;
    			}
    			else {
        
    				alert("请在正确范围内输入");
    			}
    			
    			Elem.parentNode.parentNode.getElementsByClassName("point")[0].value = point.toFixed(1);
    			UpdataGradePoint(Elem.parentNode.parentNode);	//更新学分绩点
    			UpdataTotalCredit();							//更新总学分
    			UpdataTotalGradePoint();   						//更新总学分绩点
    			UpdataGPA();									//更新GPA
    		}
    		
    		function UpdataGradePoint(course){
        //更新学分绩点
    			var point = course.getElementsByClassName("point")[0].value;
    			var credit = course.getElementsByClassName("credit")[0].value;
    			if(credit && point){
        
    				var gradePoint = point * credit;
    				course.getElementsByClassName("gradePoint")[0].value = gradePoint.toFixed(2);
    			}
    		}
    		
    		function UpdataTotalCredit(){
        	//更新总学分函数
    			var credits = document.getElementsByClassName("credit");//等价于获取课程数的过程
    			var totalCredit = 0;								//重置
    			for(var j = 0; j < credits.length; j++){
        
    				if(credits[j].value)totalCredit += Number (credits[j].value);
    			}
    			document.getElementById("totalCredit").value=totalCredit;
    		}
    		
    		function UpdataTotalGradePoint(){
        	//更新总学分绩点函数
    			var GradePoints = document.getElementsByClassName("gradePoint");
    			var totalGradePoint = 0;
    			for(var i = 0; i < GradePoints.length; i ++){
        
    				if(GradePoints[i].value)totalGradePoint += Number(GradePoints[i].value);//*1转化为数字型数据
    				}
    			document.getElementById("totalGradePoint").value = parseFloat(totalGradePoint);
    			}
    		
    		function UpdataGPA(){
        			//更新GPA函数
    			var totalCredit = Number(document.getElementById("totalCredit").value);
    			var totalGradePoint = Number(document.getElementById("totalGradePoint").value);
    			if(totalCredit && totalGradePoint){
        
    				var GPA = totalGradePoint / totalCredit;
    				document.getElementById("gpa").value = parseFloat(GPA);
    			}
    		}
    		
    			var NewCourse;
    			window.onload=function(){
        //在网页加载后,立即克隆空的course行
    				 NewCourse = document.getElementsByClassName("course")[0].cloneNode(true);
    			}
    		function AddCourse(){
        											//添加新的课程
    			var tr = NewCourse.cloneNode(true);							//克隆已经克隆得到的空行
    			var table=document.getElementById("table");	
    			table.appendChild(tr);										//将创建的行插入表格
    			tr.getElementsByClassName("credit")[0].value = "";
    			tr.getElementsByClassName("score")[0].value = "";
    			tr.getElementsByClassName("point")[0].value = "";
    			tr.getElementsByClassName("gradePoint")[0].value = "";
    			UpdataTotalCredit();										//更新总学分
    			UpdataTotalGradePoint();									//更新总学分绩点
    			UpdataGPA();												//更新GPA
    			}
    		function DeleteCourse(NowRow){
        
    			var courses = document.getElementsByClassName("course");
    			if(courses.length <= 1)alert("请至少保留一行！");
    			else {
        
    			NowRow.remove();											//删除当前行
    			UpdataTotalCredit();										//更新总学分
    			UpdataTotalGradePoint();									//更新总学分绩点
    			UpdataGPA();												//更新GPA
    			}
    		}
    		</script>
    	</head>
    	<body>
    		<h2 class='title'>使用js实现GPA计算器</h2>
    		<p align="center">姓名：xxx	学号：xxx</p>
    		<div id="GPAForm" align="center">
    		<table border="1" class="courses" id="table">
    			<tr>
    				<th>课程学分<br />Credit</th>
    				<th>课程分数<br />Score</th>
    				<th>课程绩点<br />Point</th>
    				<th>学分绩点<br />Grade Point</th>
    				<th></th>
    			</tr>
    			<tr id="course" class="course">
    				<td width="10px"> 
    				<input type="text" size="4" maxlength="4" placeholder="credit" class="credit" name="credit" onchange="getCredit(this)">
    				</td>
    				<td>
    					<input type="text" size="3" maxlength="3" oninput="if(value.length>3) value=value.slice(0,3)"/ placeholder="score" class="score" onchange="getScore(this)">
    					</td>
    				<td>
    					<input type="text" size="4" maxlength="4" placeholder="point" class="point" readonly="readonly" />
    					</td>
    				<td>
    					<input type="text" size="7" maxlength="5" placeholder="greditpoint" class="gradePoint" readonly="readonly" />
    					</td>
    				<td><button class="removeCourse_btn" onclick="DeleteCourse(this.parentNode.parentNode)">删除此课</td>
    			</tr>
    		</table>
    		</div>
    		<button type="button" class="addCourse_btn" id="addCourse" onclick="AddCourse()">添加课程</button>
    		<hr>
    		<div id="totals">
    		  <label>学分总计：
    		    <input id="totalCredit" type="text" size="7" maxlength="7" placeholder="请先填表" readonly="readonly" />
    		  </label>
    		  <label>学分绩点总计：
    		    <input id="totalGradePoint" type="text" size="7" maxlength="7" placeholder="请先填表" readonly="readonly" />
    		  </label>
    		  <label>GPA：
    		    <input id="gpa" type="text" size="7" maxlength="7" placeholder="请先填表" readonly="readonly" />
    		  </label>
    		</div>
    		<hr>
    		谢谢使用！
    	</body>
    </html>

**有问题尽管评论或者私聊哦**