自学web前端练手——简易版成绩统计页面(html+css+js)

遇到的问题:
①刚开始innerHTML一直显示不出来,然后发现是犯了之前跟“js的随机验证码和验证”这篇博文一模一样的错误_(:з」∠)_
var number=f1.getElementsByTagName(‘input’);
//获取到的时一组元素,number[i]时其中的一个文本框元素,它的值得通过value属性来获取,
number[i].value才是某个文本框元素的值
②表单提交后页面自动刷新。因为本次目标是要查看成绩统计结果,所以不需要表单提交后页面自动刷新。百度之后发现有两个方法:
1.将button标签内的按钮类型设置为submit,或者将标签内按钮类型从type="submit"修改为type=“button”
(此方法还有button按钮样式,较为美观,我采用了这个方法)
2.使用submit事件提交表单(此方法没有按钮样式,即单纯的文本)

要求:
(1)创建网页并编写HTML基本结构
(2)提示用户输入7个学生成绩,保存在数组中
(3)计算总分并输出
(4)计算平均分并输出
(5)输出有几个成绩不及格(即<60分)

效果如下:
自学web前端练手——简易版成绩统计页面(html+css+js)_第1张图片
按确认按钮提交表单后显示成绩统计结果。
自学web前端练手——简易版成绩统计页面(html+css+js)_第2张图片
按重置按钮表单清零。
自学web前端练手——简易版成绩统计页面(html+css+js)_第3张图片
重新输入成绩提交后显示新的成绩统计结果。
自学web前端练手——简易版成绩统计页面(html+css+js)_第4张图片

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#top{
		margin: 0 auto;
		height: 70px;
		background-color: #303030;
	}
	#top_logo{
		background: url(swing3.gif) 50px 2px no-repeat;
		color: #fff;
		font-size: 46px;
		font-weight: bold;
		font-family: "楷体";
		width: 400px;
		float: left;
		vertical-align: middle;
		height: 65px;
		line-height: 65px;
		padding: 1px 1px 1px 90px;
	}
	#main{
		height: 500px;
		background-color: #cff;
		text-align: center;
	}
	h3{
		height: 20px;
		line-height: 20px;
		text-align: center;
		color:#000;
	}
	#resul{
		height: 150px;
		line-height: 150px;
		font-size: 20px;
		color: #000;
	}
	#footer{
		height: 100px;
		background-color: #303030;
		font-size: 14px;
		color: #cff;
		text-align: center;
		line-height: 100px;
	}
	</style>
</head>
<body>
	<div id="top">
		<div id="top_logo">
			学生成绩统计系统
		</div>
	</div>
	<div id="main">
		<h3>请输入7个学生成绩</h3>
		<form name="grade" id="f1">
			<div><input type="text" name="number" class="mark"></div>
			<div><input type="text" name="number" class="mark"></div>
			<div><input type="text" name="number" class="mark"></div>
			<div><input type="text" name="number" class="mark"></div>
			<div><input type="text" name="number" class="mark"></div>
			<div><input type="text" name="number" class="mark"></div>
			<div><input type="text" name="number" class="mark"></div>
			<!-- <submit onclick="del();">确认</submit> -->
			<button type="button" onclick="del()">确认</button>
			<button type="reset">重置</button>
		</form>
		<div id="result"></div>
	</div>
	<div id="footer">Copyright ◎ 安徽大学计算机科学与技术学院 信息技术英才班 【2020版】</div>
	<script>
		function del(){
			var f1=document.getElementById('f1');
			var number=f1.getElementsByTagName('input');
			var count=0;
			var sum=0;
			for(var i=0;i<7;i++){
			  	sum=sum+parseInt(number[i].value);
			  	if(parseInt(number[i].value)<60){
			  		count=count+1;
			  	}
			  }
			var avg=parseInt(sum/7);
			document.getElementById('result').innerHTML="总分为:"+sum+"
平均分为:"
+avg+"
成绩不及格的人数有:"
+count; } </script> </body> </html>

你可能感兴趣的:(自学web前端)