html制作一个圆的周长有框代码
时间: 2023-08-04 20:08:35 浏览: 43
以下是一个简单的 HTML 代码示例,展示如何使用 JavaScript 计算圆的周长并在页面上显示,包含一个有框的 div:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算圆的周长</title>
<meta charset="UTF-8">
<style>
.container {
width: 400px;
height: 200px;
border: 1px solid black;
padding: 20px;
}
</style>
<script>
function calculate() {
// 获取用户输入的圆的半径
var radius = document.getElementById("radius").value;
// 计算圆的周长
var circumference = 2 * Math.PI * radius;
// 将结果显示在页面上
document.getElementById("circumference").innerHTML = "周长是:" + circumference.toFixed(2);
}
</script>
</head>
<body>
<div class="container">
<h1>计算圆的周长</h1>
<label for="radius">请输入圆的半径:</label>
<input type="number" id="radius"><br><br>
<button onclick="calculate()">计算</button><br><br>
<p id="circumference"></p>
</div>
</body>
</html>
```
在代码中,我们使用一个带有 class 为 `container` 的 div 来包含页面上的元素,并在 div 的样式中设置了边框和内边距。在 JavaScript 中,我们使用 `document.getElementById()` 方法获取用户输入的圆的半径,然后使用 JavaScript 中的内置函数计算圆的周长,并将结果显示在页面上。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)