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