编写HTML表单,用于显示圆的半径、圆和面积 1.获取用户输入的数据,然后进行类型转换与判断 2.若判断,用户输入的数值不是数据则利用警告
时间: 2024-09-26 08:03:25 浏览: 88
创建HTML表单用于显示圆的半径、计算圆的周长和面积,可以按照以下步骤进行:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>圆的半径计算器</title>
</head>
<body>
<form id="circle-form">
<label for="radius">请输入圆的半径:</label>
<input type="number" id="radius" name="radius" required>
<p><span id="error-message" style="color: red;"></span></p>
<button type="submit">计算</button>
</form>
<div id="result"></div>
<script>
const form = document.getElementById('circle-form');
const errorMessage = document.getElementById('error-message');
const resultDiv = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
const radiusInput = document.querySelector('#radius').value;
let radius = parseFloat(radiusInput);
// 判断输入是否为数字
if (isNaN(radius)) {
errorMessage.textContent = '请输入有效的数字作为半径。';
return;
} else {
errorMessage.textContent = '';
}
// 圆周长和面积公式
const circumference = 2 * Math.PI * radius;
const area = Math.PI * radius ** 2;
resultDiv.innerHTML = `半径:${radius.toFixed(2)}<br>周长:${circumference.toFixed(2)}<br>面积:${area.toFixed(2)}`;
});
</script>
</body>
</html>
```
在这个HTML表单中,用户可以输入圆的半径,如果输入的不是一个有效数字,会显示红色错误消息。点击“计算”按钮后,JavaScript会进行验证并计算出圆的周长和面积,并将结果显示在页面上。
阅读全文