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

最新推荐文章于 2023-06-03 16:09:56 发布

AC Maker

最新推荐文章于 2023-06-03 16:09:56 发布

阅读量469

点赞数 3

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/PoisonKiller/article/details/120922133

版权

javascript 专栏收录该内容

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>

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

AC Maker

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用JavaScript实现GPA计算器（学科实践任务一）

学科实践任务(一)：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
复制链接

扫一扫