html制作圆周长面积半径代码
时间: 2023-08-13 10:05:03 浏览: 107
以下是一个简单的 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 中的内置函数计算圆的周长、面积和半径,并将结果显示在页面上。
阅读全文