如何使用 JavaScript 计算三角形的面积?


概述

三角形的面积指的是整个区域,包括三角形的周长和内部面积。因此,要计算三角形的面积,我们需要计算其周长,然后再计算面积。所有这些都是手动计算方法。通过使用 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 - 现在创建一个父容器,其中包含三个类型为文本的输入标签,以及具有 id 属性的 name 属性,其 id 名称分别为 a、b 和 c。

<div>
   <input type="text" id="a">
   <input type="text" id="b">
   <input type="text" id="c">
</div>
  • 步骤 3 - 现在创建一个 HTML 按钮,并使用 cal() 作为函数的 onclick 事件。

<button onclick="cal()">Calculate</button>
  • 步骤 4 - 现在将脚本标签添加到文件的 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。

结论

通过创建上述功能,即使是不了解三角形公式的人也可以轻松地使用它,因为用户只需在界面中输入边长的值。使用这三个边长输入的优点在于,无论是什么类型的三角形,例如等边三角形、等腰三角形或直角三角形,我们都可以计算任何类型三角形的面积。此功能还可以集成到任何数字计算器中,并具有其他多种功能。

更新于: 2023年10月13日

3K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告