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

最新推荐文章于 2024-04-27 21:37:04 发布

lvshaoshishang

最新推荐文章于 2024-04-27 21:37:04 发布

阅读量3.5k

点赞数 1

分类专栏：自学web前端文章标签： css html js

本文链接：https://blog.csdn.net/lvshaoshishang/article/details/105137578

版权

本文介绍了如何使用HTML、CSS和JavaScript实现一个简易的成绩统计页面。在开发过程中，作者遇到了innerHTML显示问题和表单提交后页面自动刷新的问题，并分别给出了解决方案。最终，该页面能展示总分、平均分以及不及格人数，同时提供确认和重置功能。

摘要由CSDN通过智能技术生成

遇到的问题：
①刚开始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分）

效果如下：
在这里插入图片描述
按确认按钮提交表单后显示成绩统计结果。

按重置按钮表单清零。

重新输入成绩提交后显示新的成绩统计结果。

代码如下：

<!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

最低0.47元/天解锁文章

lvshaoshishang

关注

1
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
自学web前端练手——简易版成绩统计页面（html+css+js）

遇到的问题：①刚开始innerHTML一直显示不出来，然后发现是犯了之前跟“js的随机验证码和验证”这篇博文一模一样的错误_(:з」∠)_var number=f1.getElementsByTagName(‘input’);//获取到的时一组元素，number[i]时其中的一个文本框元素，它的值得通过value属性来获取，number[i].value才是某个文本框元素的值②表单提交后...
复制链接

扫一扫