背景介绍
本项目旨在通过HTML、CSS和JavaScript实现一个简单Web应用，用户可输入一组数字数据，系统计算并输出其平均值。该功能通过文件读写与数学计算实现，能够满足本地部署并快速运行的需求。
思路分析
- 输入输出清晰化
- HTML输入框：用户可直接输入数字，支持读取文件并自动计算。
- JavaScript函数：处理输入数据并计算平均值，输出结果并保存到本地。
- 文件读写与数学计算
- 使用Python的
with open读取文件，存储数字为列表。 - 计算平均值时采用简单数学运算，避免复杂逻辑。
- 使用Python的
代码实现
1. HTML结构
<!DOCTYPE html>
<html>
<head>
<title>数字平均值计算器</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
h2 {
text-align: center;
}
#result {
margin-top: 20px;
font-size: 24px;
}
</style>
</head>
<body>
<h2>数字平均值计算器</h2>
<input type="text" id="input" placeholder="输入数字，按回车键计算..." required>
<button onclick="calculateAverage()">计算</button>
<div id="result"></div>
<script>
function calculateAverage() {
const input = document.getElementById('input');
const numList = [];
const result = document.getElementById('result');
try {
const reader = new FileReader();
reader.onload = function () {
const text = reader.result;
const lines = text.split('\n');
numList = lines.map(numStr => parseInt(numStr, 10));
const average = numList.reduce((sum, num) => sum + num, 0) / numList.length;
result.textContent = `平均值为：${average.toFixed(2)}`;
}
reader.readAsText(input.files[0]);
} catch (error) {
result.textContent = '输入错误，请检查数字是否正确';
}
}
</script>
</body>
</html>
2. 文件读写与数据处理
- 文件读取：通过
<FileReader>读取用户提供的数字文件（如numbers.txt），存储为列表。 - 数学计算：使用Python的
with open读取文件，计算数字平均值为总和除以数量。
3. 总结
本项目通过HTML、CSS和JavaScript实现了一个可运行的Web应用，能够实现数字输入与平均值计算。核心知识点包括文件读写与数据处理，通过本地部署节省了服务器资源，同时满足简单项目的需求。该项目不仅展示了前端开发的基础知识，还强调了文件操作和数学计算的实现细节，具有良好的学习价值。