首页通过编辑框输入圆的半径，计算面积和周长在网页是显示出来(js形式）

通过编辑框输入圆的半径，计算面积和周长在网页是显示出来(js形式）

时间: 2024-09-18 10:05:42 浏览: 32

在JavaScript中，你可以创建一个简单的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="calculate()">计算</button> <div id="results"></div> <script> function calculate() { const radiusInput = document.getElementById("radius"); const radius = parseFloat(radiusInput.value); if (isNaN(radius)) { alert("请输入有效的半径值！"); return; } // 圆的面积公式：πr² const area = Math.PI * radius ** 2; // 圆的周长公式：2πr const circumference = 2 * Math.PI * radius; const resultsDiv = document.getElementById("results"); resultsDiv.innerHTML = ` 面积：${area.toFixed(2)}<br> 周长：${circumference.toFixed(2)} `; } </script> </body> </html> ``` 在这个示例里，当用户点击“计算”按钮时，会调用`calculate`函数。函数首先获取输入框中的半径值，如果输入不是有效数字，则弹出警告。接着，根据提供的半径计算圆的面积和周长，并将结果显示在id为"results"的 `<div>` 元素中。

阅读全文