首页html 用函数实现封装一个输入半径求圆的面积的函数

html 用函数实现封装一个输入半径求圆的面积的函数

时间: 2024-11-10 15:25:33 浏览: 30

在HTML中，通常我们使用JavaScript而不是纯HTML来实现交互功能，包括计算圆的面积。你可以创建一个简单的HTML页面结合JavaScript函数来完成这个任务。这里是一个示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>圆面积计算器</title> </head> <body> <label for="radius">请输入圆的半径:</label> <input type="number" id="radius" name="radius"> <button onclick="calculateArea()">计算面积</button> <p id="result"></p> <script> function calculateArea() { // 获取用户输入的半径 const radiusInput = document.getElementById('radius').value; // 检查输入是否有效 if (radiusInput > 0) { // 计算面积 const area = Math.PI * Math.pow(radiusInput, 2); // 显示结果 document.getElementById('result').innerText = `圆的面积是: ${area.toFixed(2)} 平方单位`; } else { alert("请输入正数作为半径"); } } </script> </body> </html> ``` 在这个例子中，当用户点击“计算面积”按钮时，`calculateArea`函数会被触发。它获取输入框中的半径值，然后计算并显示圆的面积。如果输入是非正数，会弹出警告提示。

阅读全文