首页帮我用html写一个输入圆的半径计算周长和面积的界面

帮我用html写一个输入圆的半径计算周长和面积的界面

时间: 2024-11-27 14:12:21 浏览: 1

python 输入半径计算圆的周长和面积示例

5星 · 资源好评率100%

python 输入半径计算圆的周长和面积示例

当然可以，下面是一个简单的HTML页面示例，用于用户输入圆的半径，并计算周长和面积： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>圆的周长和面积计算器</title> <style> .calculator-form { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; } input[type="number"] { width: 30%; padding: 10px; margin-right: 10px; font-size: 16px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } #result { margin-top: 20px; } </style> </head> <body> <div class="calculator-form"> <label for="radius">请输入圆的半径:</label> <input type="number" id="radius" name="radius"> <button onclick="calculate()">计算</button> </div> <div id="result"></div> <script> function calculate() { const radius = document.getElementById('radius').value; if (radius === '') return; // 确保输入非空 const circumference = 2 * Math.PI * parseFloat(radius); const area = Math.PI * radius * radius; document.getElementById('result').innerHTML = ` <p>周长：${circumference.toFixed(2)}</p> <p>面积：${area.toFixed(2)}</p> `; } </script> </body> </html> ``` 这个页面包含一个输入框让用户输入半径、一个计算按钮以及一个结果显示区域。当点击“计算”按钮时，JavaScript函数`calculate()`会被触发，根据用户输入的半径值计算并显示周长和面积。

阅读全文