Web前端开发 小实训(一) 成绩分类统计

用于学生web前端开发课程实训练习,掌握基本语法和数据类型

实训目的

使用分支语句,完成分数统计与等级对比,通过输入框输入分数,可以根据分数多少划分等级。

参考思路:

分析题目:根据输入分数进行等级划分。

操作过程

第一步:获取输入弹出的分数:

复制代码
 let score = prompt("请输入成绩");

第二步:判断输入的内容是否符合要求:

复制代码
  if(isNaN(score) || !Number.isInteger(Number(score)) || score<0){
        alert("输入的数据有误,请重新加载!");     
}

第三步:根据分数进行等级判断

复制代码
 if(isNaN(score) || score > 100 || score < 0){
                alert("输入成绩有误,结束输入!");
 }else if(score >= 90){
                alert("该同学的成绩是A!");
                        }else if(score >=80){
                alert("该同学的成绩是B!");
                        }else if(score >=70){
                alert("该同学的成绩是C!");
                        }else if(score >= 60){
                alert("该同学的成绩是D!");
                           }else{
                alert("该同学的成绩是E!");
                }

实战升级1

1、弹窗提示用户要输入Web程序设计成绩的学生人数,并对每个学生的成绩进行打分,打分后立即弹窗告知分数对应的等级

思路:

对当前代码新增需求:针对多个同学进行分数统计,获取有几个同学要登录成绩,进行输出:

第一步:获取学生数量,并判断数据是否正确:

复制代码
 let student_number = prompt("请输入需要分数统计的同学数量:");
        //判断:判断数据是否正常
        if (isNaN(student_number) || !Number.isInteger(Number(student_number)) || student_number < 1) {
            alert("同学数量有误!");
        } else {
......//要更新的内容
}

第二步:根据学生数量,循环获取每一位同学的分数并展示。

复制代码
 ....else {
            for (let index = 1; index <= student_number; index++) {
                let score = prompt("请输入第"+index+"个同学的成绩");//修改此处代码
                if (isNaN(score) || !Number.isInteger(Number(score))) {
                    alert("输入的数据有误,请重新加载!");
                }
                if (isNaN(score) || score > 100 || score < 0) {
                    alert("输入成绩有误,结束输入!");
                } else if (score >= 90) {
                    alert("该同学的成绩是A!");
                } else if (score >= 80) {
                    alert("该同学的成绩是B!");
                } else if (score >= 70) {
                    alert("该同学的成绩是C!");
                } else if (score >= 60) {
                    alert("该同学的成绩是D!");
                } else {
                    alert("该同学的成绩是E!");
                }
            }
            }

实战升级2

在输入完所有同学的成绩后,通过程序分析出获得每个获得等级的人数是多少,并展示在页面中。

对当前代码新增需求:将每个同学的等级进行归纳统计,可以在页面将等级的学生数量进行展示:

第一步:设置五个成绩分段的变量

复制代码
  let rank_a_count = 0;
  let rank_b_count = 0;
  let rank_c_count = 0;
  let rank_d_count = 0;
  let rank_e_count = 0;

第二步:针对每一个分数区间的同学等级数量让上述变量进行自增。

复制代码
...
} else if (score >= 90) {
                    alert("该同学的成绩是A!");
                    rank_a_count++;
                } else if (score >= 80) {
                    alert("该同学的成绩是B!");
                    rank_b_count++;
                } else if (score >= 70) {
                    alert("该同学的成绩是C!");
                    rank_c_count++;
                } else if (score >= 60) {
                    alert("该同学的成绩是D!");
                    rank_d_count++;
                } else {
                    alert("该同学的成绩是E!");
                    rank_e_count++;
                }

第三步:把等级数量的统计展示

复制代码
 //展示:
    document.write("本次共计"+student_number+"位同学录入成绩等级分布如下:<br>");
    document.write("获得等级A的同学人数:"+rank_a_count+"<br>");
    document.write("获得等级B的同学人数:"+rank_b_count+"<br>");
    document.write("获得等级C的同学人数:"+rank_c_count+"<br>");
    document.write("获得等级D的同学人数:"+rank_d_count+"<br>");
document.write("获得等级E的同学人数:"+rank_e_count+"<br>");

补充:如果出现数据错误,请立即提示。

复制代码
 if (isNaN(score) || !Number.isInteger(Number(score))) {   Number();//其他类型转数字类型, Number.isInteger()判断是否为整数
                    alert("输入的数据有误,请重新加载!");
  }

完整代码

复制代码
    <script>
        let rank_a_count = 0;
        let rank_b_count = 0;
        let rank_c_count = 0;
        let rank_d_count = 0;
        let rank_e_count = 0;
        let student_number = prompt("请输入需要分数统计的同学数量:");
        //判断:判断数据是否正常
        if (isNaN(student_number) || !Number.isInteger(Number(student_number)) || student_number < 1) {
            alert("同学数量有误!");
        } else {
            for (let index = 1; index <= student_number; index++) {
                let score = prompt("请输入第" + index + "个同学的成绩");
                if (isNaN(score) || !Number.isInteger(Number(score))) {
                    alert("输入的数据有误,请重新加载!");
                } else if (score > 100 || score < 0) {
                    alert("输入成绩有误,该同学没有成绩");
                } else if (score >= 90) {
                    alert("该同学的成绩是A!");
                    rank_a_count++;
                } else if (score >= 80) {
                    alert("该同学的成绩是B!");
                    rank_b_count++;
                } else if (score >= 70) {
                    alert("该同学的成绩是C!");
                    rank_c_count++;
                } else if (score >= 60) {
                    alert("该同学的成绩是D!");
                    rank_d_count++;
                } else {
                    alert("该同学的成绩是E!");
                    rank_e_count++;
                }
            }
        }
    //展示:
    document.write("本次共计"+student_number+"位同学录入成绩等级分布如下:<br>");
    document.write("获得等级A的同学人数:"+rank_a_count+"<br>");
    document.write("获得等级B的同学人数:"+rank_b_count+"<br>");
    document.write("获得等级C的同学人数:"+rank_c_count+"<br>");
    document.write("获得等级D的同学人数:"+rank_d_count+"<br>");
    document.write("获得等级E的同学人数:"+rank_e_count+"<br>");
    </script>

因面向的是初学Web前端课程的学生,因此代码可能有一些逻辑问题。

相关推荐
半旧5184 分钟前
【Java Web02】WEB服务器内部实现技术揭秘
java·服务器·前端
拿本唠嗑AI研究12 分钟前
现代前端架构爬虫指南:从静态页面到 React/Vue 单页应用
前端·爬虫·架构
独孤九剑打醒他30 分钟前
【原创开源】双层Master‑Worker软硬协同调度架构:从根源解决分布式数据一致性难题
前端·嵌入式硬件·架构·前端框架·硬件工程
程序员黑豆6 小时前
Java包装类:基本类型与对象的桥梁
java·前端·ai编程
bugcome_com9 小时前
JWT 知识小课堂:从入门到精通,一文吃透 JSON Web Token
前端·json
To_OC9 小时前
写了三天 Next.js,我的 React 世界观被拆了又装回去
前端·全栈·next.js
独泪了无痕9 小时前
viewer.js 安装与配置指南:实现图片预览功能
前端·vue.js
Fluxart.ai11 小时前
电商商品图审核怎么自动化?规则引擎、人工复核与发布门禁
java·前端·自动化
why技术12 小时前
AI 写的文章,可能都带着手敲一遍都去不掉的“隐形水印”。
前端·人工智能·后端
愚公搬代码12 小时前
【愚公系列】《Android应用案例开发大全》016-LBS类应用掌上杭州(辅助工具类的开发)
android·前端