33岁转职者的前端笔记-DAY 22 成绩计算机练习笔记

流程

1.先观察画面，哪些值需要抓
2.抓HTML的值：
a.先宣告变数，变数就是抓HTML的值，也可以说变数取代HTML的值之後用变数做程序的处理。
例：const 变数名称 = document.getElementById(html id的值);

范例code如下：

// 成绩计算表单
const scoreForm = document.getElementById('scoreForm');
// 各科目分数输入框
const zhInput = document.getElementById('chineseScoreInput');
const enInput = document.getElementById('englishScoreInput');
const mathInput = document.getElementById('mathScoreInput');
// 报告显示区块
const reportDiv = document.getElementById('result');

3.抓form的值或按钮的值，去做监听，在想流程怎麽做
4.按照流程做：
a.取得各科目成绩：宣告变数去存入成绩，成绩数值要转换成数字才能做运算
b.计算总分：宣告加总变数等於三个成绩加起来
c.计算平均分数：宣告加总的成绩除以3
d.计算等级

scoreForm.addEventListener('submit', function (e) {
   // 防止表单重整画面
   e.preventDefault();
   console.log("表单被送出了");
   // 取得各科目成绩
   const zh = parseInt(zhInput.value),
         en = parseInt(enInput.value),
         math = parseInt(mathInput.value);

   // 计算总分
   const sum = zh +en + math;
   console.log("总分", sum);

   // TODO: 计算平均分数
   const avg = Math.round(sum / 3 * 100) / 100;
   console.log("avg",avg);
   
   // TODO: 计算等级
   // 平均分数 >= 90 为A+
   // 平均分数 >= 80 为A
   // 平均分数 >= 70 为B
   // 平均分数 >= 60 为C
   // 平均分数 < 60 为F。
   let gpa;
   let color = "secondary";
   if (avg >= 90) {
       gpa = "A+";
       color = "success";
   } else if (avg >= 80) {
       gpa = "A";
   } else if (avg >= 70) {
       gpa = "B";
   } else if (avg >= 60) {
       gpa = "C";
   } else {
       gpa = "F";
       color = "danger";
   }

   // TODO: 显示报告
   const report = `<div class="alert alert-${color}">
       国文: ${zh} <br>
       英文: ${en} <br>
       数学: ${math} <br>
       总分: ${sum} <br>
       平均分数: ${avg}
       总评: ${gpa}
   </div>`;
   reportDiv.innerHTML = report;

});

重点语法小笔记

e.preventDefault(); 防止表单重整画面
const avg = math.round(sum / 3 * 100) / 100; 四舍五入到小数点第二位