如何使用 JavaScript 查找三角形的面积？

javascriptweb developmentfront end technology

概述

三角形的面积是指整个面积，即三角形的周长和内部面积。因此，要计算三角形的面积，我们将计算其周长，然后计算面积，但所有这些都是手动理解的。因此，通过使用 JavaScript，我们将自动化整个过程，这意味着用户只需输入三角形的边和界面，三角形的面积就会自动计算出来。

表达式（女主角公式）

下面给出了女主角公式表达式 -

(a+b+c)/2;
Math.sqrt(p*((p-a)*(p-b)*(p-c)));

其中第一个表达式是求三角形半周长的公式，其中a、b和c代表三角形的边。第二个表达式表示三角形面积的公式，其中p是三角形的半周长，a、b和c是三角形的边。

算法

步骤1 - 在文本编辑器上创建一个HTML文件，并向文件中添加HTML样板。
步骤2 - 现在创建一个父容器，其中包含三个类型为text的输入标签，属性名为id，id名称分别为a、b和c。

<div>
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
</div>

步骤 3 − 现在创建一个带有 onclick 事件的 HTML 按钮，其中 cal() 为函数。

<button onclick="cal()">Calculate</button>

步骤 4 − 现在将 script 标签添加到文件的 body 标签中。

<script><script>

步骤 5 − 现在创建一个名为 cal() 的箭头函数。

cal = () => {)

步骤 6 − 现在使用 HTML DOM 属性获取输入框的值。

const a = parseInt(document.getElementById("a").value);
const b = parseInt(document.getElementById("b").value);
const c = parseInt(document.getElementById("c").value);

步骤 7 − 现在使用三角形公式并将它们转换为具有有效变量的表达式。

const sp = (a+b+c)/2;
const area = Math.sqrt(sp*((sp-a)*(sp-b)*(sp-c)));

步骤 8 − 计算三角形的面积，并使用 innerHTML 属性将输出显示到屏幕上。

document.getElementById("ans").innerHTML = "Answer: "+area;

示例

在此示例中，我们将使用 HTML 和 CSS 创建界面，该界面接受三角形边的输入，还将使用 JavaScript 创建函数来计算三角形的面积。

<html>
<head>
   <title> Area of triangle </title>
   <style>
      body{
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 0.5rem;
      }
      div{
         display: flex;
         gap: 2rem;
         place-content: center;
      }
      input{
         width:3rem;
         padding: 0.5rem;
         font-weight: 800;
         text-align: center;
      }
      button{
         width: 5rem;
      }
      #ans{
         border: 1px dashed black;
         background-color: green;
         color: white;
      }
   </style>
</head>
<body>
   <h3> Calculate the area of triangle </h3>
   <div>
      <input type="text" id="a">
      <input type="text" id="b">
      <input type="text" id="c">
   </div>   
   <button onclick="cal()">Calculate</button>
   <p id="ans"></p>
   <script>
      cal = () => {
         const a = parseInt(document.getElementById("a").value);
         const b = parseInt(document.getElementById("b").value);
         const c = parseInt(document.getElementById("c").value);

         const sp = (a+b+c)/2;
         const area = Math.sqrt(sp*((sp-a)*(sp-b)*(sp-c)));

         document.getElementById("ans").innerHTML = "Answer: "+area;
      }
   </script>
</body>
</html>

下图显示了上述示例的输出，其中当用户将功能加载到其浏览器时，他将获得如下所示的界面，其中有三个输入框，用于输入三角形的三条边和一个计算按钮。因此，当用户在各自的输入字段中输入三角形的边并点击计算按钮时，输入字段的值将在后端的公式中处理，并在浏览器的屏幕上产生如下所示的输出。用户输入三角形的边为 3、4 和 5，然后点击计算按钮，他将获得输出 6。