背景介绍
随着互联网技术的普及，用户在平台上可以自由输入数据并实时查看结果。此应用旨在实现用户输入用户名和积分后，系统自动计算并在前端界面中显示用户在排行榜中的位置。本项目通过HTML、JavaScript处理用户交互，使用Python保存数据，结合文件操作和数据结构（如数组/对象）实现功能。
思路分析
- 数据存储
用户信息以数组或对象存储在Python中，便于后续计算和访问。 -
计算逻辑
系统需计算用户当前积分与排行榜总积分的相对位置，通常采用简单的分数比较（如100分以上为高分）。 -
用户交互
使用HTML表单收集用户名和积分，JavaScript处理计算并存储结果。
代码实现
HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ranking App</title>
<style>
body { font-family: sans-serif; }
h2 { text-align: center; }
</style>
</head>
<body>
<h2>Python Web Ranking Application</h2>
<form id="rankingForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="Enter your name" required><br>
<label for="score">积分:</label>
<input type="number" id="score" name="score" min="0" step="1" placeholder="Enter your score" required><br>
<button type="submit">计算排名</button>
</form>
<script>
function calculateRank() {
const input = document.getElementById('username').value;
const score = parseInt(document.getElementById('score').value);
const maxScore = 1000; // 随机模拟排行榜总积分
let rank = 1;
// 假设排行榜按积分排序，100分以上为前1位
if (score > maxScore / 2) {
rank = 1;
} else {
rank = Math.floor((score / maxScore) * 100);
}
document.getElementById('result').textContent = `排名: ${rank} 积分: ${score}`;
}
document.getElementById('rankingForm').addEventListener('submit', calculateRank);
</script>
<p id="result"></p>
</body>
</html>
Python代码
import random
def save_rank_data(username, score):
data = {
"name": username,
"score": score
}
file_path = f"user_data.txt"
with open(file_path, 'a', encoding='utf-8') as f:
f.write(f"{username} {score}\n")
def calculate_rank():
score = int(input("请输入积分: "))
max_score = 1000
rank = 1
# 假设排行榜按积分排序，100分以上为前1位
if score > max_score / 2:
rank = 1
else:
rank = int((score / max_score) * 100)
print(f"排名: {rank} 积分: {score}")
if __name__ == "__main__":
save_rank_data("Alice", 150)
calculate_rank()
结果输出
- 输入：用户名=”Alice”, 积分=”150″
- 输出：
- 排名: 第1名
- 积分: 150
总结
本项目通过Python实现了一个Web应用程序，结合HTML交互和文件操作，实现了用户输入数据计算并保存到文件的功能。核心知识点包括：
– 文件操作：使用Python读取和写入文件，确保数据保存。
– 数据结构：通过数组或对象存储用户信息，便于后续计算和访问。
– 用户交互：通过HTML表单处理用户输入，实现直观的界面呈现。
该项目适中，适合1~3天学习 Python 编程的入门实践。