通过编辑框输通过编辑框输入圆的半径,计算面积和周长在网页是显示出来。入圆的半径,计算面积和周长在网页是显示出来。
时间: 2024-09-18 12:05:39 浏览: 35
第一个计算圆周长的对话框程序
在网页上实现这个功能,通常会结合HTML、CSS和JavaScript。你可以创建一个简单的表单让用户输入圆的半径,然后通过JavaScript进行实时计算。以下是步骤概述:
1. **HTML部分**:
- 创建一个输入框用于输入半径值,以及两个显示结果的区域(如`<p>`标签)。
```html
<input type="number" id="radiusInput" placeholder="请输入半径">
<p id="areaResult"></p>
<p id="circumferenceResult"></p>
```
2. **CSS部分**:
- 可能需要一些基本样式来美化页面布局。
3. **JavaScript部分**:
- 使用`document.getElementById()`获取输入框和结果元素。
- 监听输入框的改变事件,当半径变化时计算面积和周长。
```javascript
const radiusInput = document.getElementById('radiusInput');
const areaResult = document.getElementById('areaResult');
const circumferenceResult = document.getElementById('circumferenceResult');
radiusInput.addEventListener('change', function() {
const radius = parseFloat(this.value);
if (isNaN(radius)) return;
const pi = 3.14159;
const area = pi * Math.pow(radius, 2);
const circumference = 2 * pi * radius;
areaResult.textContent = `面积: ${area.toFixed(2)}`;
circumferenceResult.textContent = `周长: ${circumference.toFixed(2)}`;
});
```
当你在输入框里输入半径并回车或者直接修改数值时,页面会动态显示计算出的面积和周长。
阅读全文