页面设置5个文本框,设置4个按钮分别是 最大,最小,平均,求和,点击按钮将结果显示到一个结果框中。
时间: 2024-01-05 17:03:28 浏览: 23
好的,这个问题需要用到 HTML、CSS 和 JavaScript。以下是实现的示例代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style type="text/css">
input[type="text"] {
width: 100px;
height: 30px;
font-size: 16px;
padding: 5px;
}
input[type="button"] {
width: 80px;
height: 30px;
font-size: 16px;
margin: 10px;
}
#result {
width: 200px;
height: 50px;
font-size: 16px;
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<input type="text" id="num1" placeholder="输入数字">
<input type="text" id="num2" placeholder="输入数字">
<input type="text" id="num3" placeholder="输入数字">
<input type="text" id="num4" placeholder="输入数字">
<br>
<input type="button" value="最大" onclick="getMax()">
<input type="button" value="最小" onclick="getMin()">
<input type="button" value="平均" onclick="getAverage()">
<input type="button" value="求和" onclick="getSum()">
<br>
<input type="text" id="result" readonly>
<script type="text/javascript" src="calc.js"></script>
</body>
</html>
```
CSS 代码:
```
input[type="text"] {
width: 100px;
height: 30px;
font-size: 16px;
padding: 5px;
}
input[type="button"] {
width: 80px;
height: 30px;
font-size: 16px;
margin: 10px;
}
#result {
width: 200px;
height: 50px;
font-size: 16px;
padding: 5px;
border: 1px solid #ccc;
}
```
JavaScript 代码(保存为 calc.js 文件):
```
function getMax() {
// 获取输入框的值
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var num3 = parseFloat(document.getElementById('num3').value);
var num4 = parseFloat(document.getElementById('num4').value);
// 计算最大值
var max = Math.max(num1, num2, num3, num4);
// 显示结果
document.getElementById('result').value = max;
}
function getMin() {
// 获取输入框的值
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var num3 = parseFloat(document.getElementById('num3').value);
var num4 = parseFloat(document.getElementById('num4').value);
// 计算最小值
var min = Math.min(num1, num2, num3, num4);
// 显示结果
document.getElementById('result').value = min;
}
function getAverage() {
// 获取输入框的值
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var num3 = parseFloat(document.getElementById('num3').value);
var num4 = parseFloat(document.getElementById('num4').value);
// 计算平均值
var average = (num1 + num2 + num3 + num4) / 4;
// 显示结果
document.getElementById('result').value = average;
}
function getSum() {
// 获取输入框的值
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var num3 = parseFloat(document.getElementById('num3').value);
var num4 = parseFloat(document.getElementById('num4').value);
// 计算和
var sum = num1 + num2 + num3 + num4;
// 显示结果
document.getElementById('result').value = sum;
}
```
以上代码实现了一个简单的计算器,可以输入四个数字,然后点击按钮计算最大值、最小值、平均值和和,并将结果显示在一个结果框中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)