使用HTML、CSS和JavaScript创建简单的计算器

Javascript Web开发前端技术

学生成绩计算器用于输入所有科目的成绩，然后根据学生的成绩计算百分比。此计算器返回一个相当可靠的学生成绩指标。

计算成绩的简单公式是

$\text{百分比}=\frac{\text{获得分数}}{\text{总分}}\times 100$

我们将使用HTML获取输入，输入完成后，我们将调用JS函数计算这些数字的平均百分比，并将结果返回给用户。

创建计算器的步骤：

我们将使用input标签从用户那里获取输入。
获取输入后，我们将这些输入传递给JS中的calculate函数。
calculate函数将汇总结果并返回结果。
获取结果后，HTML将把结果显示给用户。

示例

在下面的示例中，我们创建了一个简单的成绩计算器，它将获取成绩输入并找到每个学生的总成绩百分比。

index.html

<!DOCTYPE html>
<html>
<head>
   <title>Student Grade Calculator</title>
   <!-- link for font -->
   <link href= "https://fonts.googleapis.ac.cn/css family=Righteous&display=swap"rel="stylesheet"/>
   <link rel="stylesheet" href="styles.css" />
</head>
<body>
   <!-- main html -->
   <h1 style="color: green">
      Welcome To Tutorials Point
   </h1>
   <div class="container">
   <h2>Student grade calculator:</h2>
   <div class="screen-body-item">
      <div class="app">
      <div class="form-group">
         <!-- option for taking the input -->
         Enter Student's marks in Chemistry:
         <input
         type="text"
         class="form-control"
         placeholder="CHEMISTRY"
         id="chemistry" />
   </div>
   <div class="form-group">
      Enter Student's marks in Maths:
      <input
      type="text"
      class="form-control"
      placeholder="MATHS"
      id="maths" />
   </div>
   <div class="form-group">
         Enter Student's marks in Physics:
         <input
         type="text"
         class="form-control"
         placeholder="PHYSICS"
         id="phy" />
      </div>
      <div>
         <input
         type="button"
         value="show Percentage"
         class="form-button"
         onclick="calculate()" />
      </div>
      </div>
   </div>
   <!-- for showing the result-->
   <div class="form-group showdata">
      <p id="showdata"></p>
   </div>
   </div>
   <!--adding external javascript file-->
   <script src="script.js"></script>
</body>
</html>

styles.css

.container {
   flex: 0 1 700px;
   margin: auto;
   padding: 10px;
}
.screen-body-item {
   flex: 1;
   padding: 50px;
}
input {
m   argin: 10px 10px 10px;
}
.showdata {
   color: black;
   font-size: 1.2rem;
   padding-top: 10px;
   padding-bottom: 10px;
}
#form-group {
   padding: 20px;
}

script.js

// Function for calculating grades
const calculate = () => {
   // Getting input from user into height variable.
   let chemistry = document.querySelector("#chemistry").value;
   let maths = document.querySelector("#maths").value;
   let phy = document.querySelector("#phy").value;
   let grades = "";

   // Input is string so typecasting is necessary. */
   let totalgrades =
      parseFloat(chemistry) +
      parseFloat(maths) +
      parseFloat(phy);

   // Checking the condition for the providing the
   // grade to student based on percentage
   let percentage = (totalgrades / 300) * 100;
   if (percentage <= 100 && percentage >= 80) {
      grades = "A";
   } else if (percentage <= 79 && percentage >= 60) {
      grades = "B";
   } else if (percentage <= 59 && percentage >= 40) {
      grades = "C";
   } else {
      grades = "F";
   }
   // Checking the values are empty if empty than
   // show please fill them
   if (chemistry == ""|| maths == "" || phy == "") { document.querySelector("#showdata").innerHTML = "Please enter all the fields";
   } else {
      // Checking the condition for the fail and pass
      if (percentage >= 39.5) {
      document.querySelector(
         "#showdata"
      ).innerHTML =
         ` Out of 300 your total is ${totalgrades}
         and percentage is ${percentage}%. <br>
         Your grade is ${grades}. You are Pass. `;
      } else {
         document.querySelector(
            "#showdata"
      ).innerHTML =
         ` Out of 300 your total is ${totalgrades}
         and percentage is ${percentage}%. <br>
         Your grade is ${grades}. You are Fail. `;
      }
   }
};