首页html制作圆周长面积半径代码

html制作圆周长面积半径代码

时间: 2023-08-13 21:05:03 浏览: 57

以下是一个简单的 HTML 代码示例，展示如何使用 JavaScript 计算圆的周长、面积和半径： ```html <!DOCTYPE html> <html> <head> <title>计算圆的周长、面积和半径</title> <meta charset="UTF-8"> <script> function calculate() { // 获取用户输入的圆的半径 var radius = document.getElementById("radius").value; // 计算圆的周长、面积和半径 var circumference = 2 * Math.PI * radius; var area = Math.PI * radius * radius; var diameter = 2 * radius; // 将结果显示在页面上 document.getElementById("circumference").innerHTML = circumference.toFixed(2); document.getElementById("area").innerHTML = area.toFixed(2); document.getElementById("diameter").innerHTML = diameter.toFixed(2); } </script> </head> <body> <h1>计算圆的周长、面积和半径</h1> <label for="radius">请输入圆的半径：</label> <input type="number" id="radius"><br><br> <button onclick="calculate()">计算</button><br><br> <p>圆的周长是：<span id="circumference"></span></p> <p>圆的面积是：<span id="area"></span></p> <p>圆的直径是：<span id="diameter"></span></p> </body> </html> ``` 在代码中，我们使用 `document.getElementById()` 方法获取用户输入的圆的半径，然后使用 JavaScript 中的内置函数计算圆的周长、面积和半径，并将结果显示在页面上。