概述
三角形的面積是指整個(gè)面積，即三角形的周長(zhǎng)和內(nèi)部面積。因此，為了計(jì)算三角形的面積，我們將計(jì)算其周長(zhǎng)，然后計(jì)算面積，但所有這些都是找到它的手動(dòng)理解。因此，通過(guò)使用 JavaScript，我們將自動(dòng)化整個(gè)過(guò)程，這意味著用戶只需輸入三角形的邊并進(jìn)入界面，三角形的面積就會(huì)自動(dòng)計(jì)算。
計(jì)算公式
下面給出了主要的公式表達(dá)式 -
(a+b+c)/2; Math.sqrt(p*((p-a)*(p-b)*(p-c)));
其中第一個(gè)表達(dá)式是求三角形半周長(zhǎng)的公式，其中a、b、c代表三角形的邊。第二個(gè)表達(dá)式表示三角形面積公式，其中 p 是三角形的半周長(zhǎng)，a、b 和 c 是三角形的邊。
算法
步驟 1 - 在文本編輯器上創(chuàng)建 HTML 文件并向該文件添加 HTML 樣板。
步驟 2 - 現(xiàn)在創(chuàng)建一個(gè)父容器，其中包含三個(gè)文本類型的輸入標(biāo)簽，屬性名稱為 id，id 名稱分別為 a、b 和 c。
<div> <input type="text" id="a"> <input type="text" id="b"> <input type="text" id="c"> </div>
步驟 3 - 現(xiàn)在創(chuàng)建一個(gè)帶有 onclick 事件的 HTML 按鈕，并使用 cal() 作為函數(shù)。
<button onclick="cal()">Calculate</button>
步驟 4 - 現(xiàn)在將腳本標(biāo)簽添加到文件的正文標(biāo)簽中。
<script><script>
步驟 5 - 現(xiàn)在創(chuàng)建一個(gè)名為 cal() 的箭頭函數(shù)。
cal = () => {)步驟 6 - 現(xiàn)在使用 HTML DOM 屬性獲取輸入框的值。
const a = parseInt(document.getElementById("a").value);
const b = parseInt(document.getElementById("b").value);
const c = parseInt(document.getElementById("c").value);步驟 7 - 現(xiàn)在使用三角形公式并將其轉(zhuǎn)換為具有有效變量的表達(dá)式。
const sp = (a+b+c)/2; const area = Math.sqrt(sp*((sp-a)*(sp-b)*(sp-c)));
步驟 8 - 計(jì)算三角形的面積并使用innerHTML 屬性將輸出顯示到屏幕上。
document.getElementById("ans").innerHTML = "Answer: "+area;例子
在此示例中，我們將使用 HTML 和 CSS 創(chuàng)建界面，該界面接受三角形各邊的輸入，還將使用 JavaScript 創(chuàng)建一個(gè)函數(shù)來(lái)計(jì)算三角形的面積。
<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>下圖顯示了上述示例的輸出，其中當(dāng)用戶將功能加載到瀏覽器時(shí)，他將獲得如下所示的界面，其中包含三角形三邊的三個(gè)輸入框和一個(gè)計(jì)算按鈕。因此，當(dāng)用戶在各自的輸入字段中輸入三角形的邊并點(diǎn)擊計(jì)算按鈕時(shí)，輸入字段的值將在后端的公式中進(jìn)行處理，并在瀏覽器屏幕上產(chǎn)生輸出，如下所示。用戶輸入三角形的邊為 3、4 和 5，然后點(diǎn)擊計(jì)算按鈕，他將得到輸出 6。文章來(lái)源：http://www.zghlxwxcb.cn/article/402.html
總結(jié)
通過(guò)創(chuàng)建上述功能，即使不知道三角形公式的每個(gè)人都可以輕松使用，因?yàn)橛脩糁恍柙诮缑嬷休斎脒呏导纯伞Ｊ褂眠@個(gè)三邊值輸入的優(yōu)點(diǎn)是應(yīng)該存在任何三角形，例如等邊三角形、孤立三角形或直角三角形，我們可以計(jì)算任何類型三角形的面積。此功能可以集成到任何數(shù)字計(jì)算器中，并且還具有其他一些功能。文章來(lái)源地址http://www.zghlxwxcb.cn/article/402.html
到此這篇關(guān)于如何使用 JavaScript 求三角形面積？的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
