技术文摘
用 JavaScript 编写程序计算矩形面积与周长
用 JavaScript 编写程序计算矩形面积与周长
在网页开发和编程领域,JavaScript 是一门强大且应用广泛的脚本语言。掌握用 JavaScript 编写程序来计算矩形的面积与周长,是很多开发者入门时需要学习的基础内容。
我们要明确计算矩形面积与周长的数学公式。矩形面积的计算公式是:面积 = 长 × 宽;周长的计算公式是:周长 = 2 ×(长 + 宽)。接下来,就可以用 JavaScript 来实现这个功能。
在 JavaScript 中,我们可以通过以下步骤来完成程序编写。首先,我们需要获取矩形的长和宽。这可以通过用户在网页输入框中输入数据来实现,也可以直接在代码中设定固定的值。
假设我们通过在代码中设定固定值的方式来进行演示。代码如下:
let length = 5;
let width = 3;
let area = length * width;
let perimeter = 2 * (length + width);
console.log("矩形的面积是:" + area);
console.log("矩形的周长是:" + perimeter);
在上述代码中,我们首先定义了两个变量 length 和 width,分别代表矩形的长和宽,并给它们赋值为 5 和 3。接着,按照面积和周长的计算公式,分别计算出矩形的面积和周长,并将结果存储在 area 和 perimeter 变量中。最后,使用 console.log() 函数将计算结果输出到控制台。
如果希望从用户输入获取矩形的长和宽,可以使用 HTML 的输入元素结合 JavaScript 的 document.getElementById() 方法。示例代码如下:
<!DOCTYPE html>
<html>
<body>
<input type="number" id="lengthInput" placeholder="请输入长度">
<input type="number" id="widthInput" placeholder="请输入宽度">
<button onclick="calculate()">计算</button>
<p id="result"></p>
<script>
function calculate() {
let length = parseFloat(document.getElementById('lengthInput').value);
let width = parseFloat(document.getElementById('widthInput').value);
let area = length * width;
let perimeter = 2 * (length + width);
document.getElementById('result').innerHTML = "矩形的面积是:" + area + "<br>矩形的周长是:" + perimeter;
}
</script>
</body>
</html>
在这段代码中,我们创建了两个输入框让用户输入长和宽,一个按钮用于触发计算。当用户点击按钮时,calculate() 函数被调用,从输入框中获取用户输入的值,并转换为数字类型,然后计算面积和周长,最后将结果显示在页面上。
通过这些示例,你已经学会了如何用 JavaScript 编写程序来计算矩形的面积与周长。无论是简单的固定值计算,还是与用户交互获取输入进行计算,JavaScript 都能轻松实现。这不仅有助于加深对 JavaScript 语言的理解,也为后续更复杂的编程奠定了基础。
TAGS: 程序实现 JavaScript编程 矩形面积计算 矩形周长计算
- Element UI 表格列如何显示成一行并解决相关问题
- ECharts地图点击图例颜色变化原因与自定义方法
- Vue3 + Element Plus 如何渲染含二级分类的行列动态 Excel 表格
- AJAX请求本地服务器报文错误,缓存问题解决方法
- 在 VuePress 里怎样实现章节间跳转
- 优化 JsSIP 视频通话对方画面延迟以提升显示速度的方法
- AJAX请求Node.js服务器文本遇错,报错、缓存及文本更新问题解法
- CSS 渐变边框仅显示左右侧的解决办法
- CSS 中背景色为 var() 时怎样设置透明度
- 使用CSS处理溢出文本并以...结尾的方法
- Vue3 + Element Plus的el-table组件实现带两级分类及部分单元格合并的复杂表格方法
- Vue3 + Element Plus 实现复杂 el-table 表格功能:横列动态渲染、二级分类与行列合并
- CSS 实现半圆形形状的方法
- 前端网页常见的六个问题,你知道吗
- Nuxt里的请求上下文