首页js编写：输入长宽点击按钮计算周长

js编写：输入长宽点击按钮计算周长

时间: 2024-09-24 14:18:40 浏览: 38

在JavaScript中，你可以创建一个简单的HTML页面，并结合JavaScript来实现这个功能。首先，你需要一个输入框让用户输入长和宽，以及一个按钮触发计算周长的操作。下面是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>周长计算器</title> <style> button { margin-top: 10px; } </style> </head> <body> <label for="length">长度：</label> <input type="number" id="length" placeholder="请输入长度"><br><br> <label for="width">宽度：</label> <input type="number" id="width" placeholder="请输入宽度"><br><br> <button onclick="calculatePerimeter()">计算周长</button> <p id="result"></p> <script> function calculatePerimeter() { const length = parseFloat(document.getElementById('length').value); const width = parseFloat(document.getElementById('width').value); if (isNaN(length) || isNaN(width)) { alert('请输入有效数字！'); } else { const perimeter = 2 * (length + width); document.getElementById('result').innerText = `周长为：${perimeter}单位`; } } </script> </body> </html> ``` 在这个例子中，当用户点击“计算周长”按钮时，`calculatePerimeter`函数会被调用。它获取输入框中的值，检查是否为数字，然后计算周长并将结果显示在页面上。

阅读全文