js编写实现圆的周长、面积的计算,文本框用来输入圆的半径值,下列列表框,用来选择计算周长或者面积,一个点击进行计算的按钮空件
时间: 2024-09-24 07:10:34 浏览: 33
js计算文本框输入的字符数
在JavaScript中,你可以通过HTML创建用户界面,结合JavaScript函数来实现这个需求。首先,你需要创建一个HTML结构,包含一个输入半径的文本框、两个下拉列表(用于选择计算项目)以及一个按钮。这是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circle Calculator</title>
</head>
<body>
<label for="radius">请输入圆的半径:</label>
<input type="number" id="radius" name="radius">
<select id="calculation-type">
<option value="perimeter">计算周长</option>
<option value="area">计算面积</option>
</select>
<button onclick="calculate()">点击计算</button>
<p id="result"></p>
<script src="circle_calculator.js"></script>
</body>
</html>
```
接下来,创建一个名为`circle_calculator.js`的外部脚本来处理计算逻辑:
```javascript
function calculate() {
const radiusInput = document.getElementById("radius");
const calculationType = document.getElementById("calculation-type").value;
const resultElement = document.getElementById("result");
if (!isNaN(radiusInput.value)) {
let result;
switch (calculationType) {
case "perimeter":
result = 2 * Math.PI * radiusInput.value;
break;
case "area":
result = Math.PI * Math.pow(radiusInput.value, 2);
break;
default:
result = "请选择正确的计算类型";
break;
}
resultElement.textContent = `结果: ${result.toFixed(2)}`;
} else {
resultElement.textContent = "请输入有效的半径值";
}
}
```
在这个例子中,当用户点击“计算”按钮时,`calculate`函数会获取输入的半径值和选择的计算类型,然后根据类型计算出圆的周长或面积,并将结果显示在页面上。
阅读全文