背景介绍
在本地环境中，我们可以通过创建HTML、CSS和JavaScript实现一个简单的Web页面，用户输入姓名和年龄后，系统自动返回相关信息。该项目采用HTML结构展示反馈信息，结合前端交互设计，确保用户输入和反馈信息的清晰可见。
思路分析
本项目的核心需求是：
1. 用户输入姓名和年龄信息
2. 系统返回提示信息
3. 页面使用HTML、CSS和JavaScript实现
通过以下步骤实现：
– 创建HTML结构，使用<input>元素获取用户输入
– 使用JavaScript处理用户输入数据，保存为变量
– 根据输入数据生成HTML页面，显示反馈信息
代码实现
1. HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息反馈</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h2 {
color: #333;
}
input, label {
display: block;
margin-bottom: 10px;
}
#output {
margin-top: 20px;
font-size: 16px;
color: #1f77b4;
}
</style>
</head>
<body>
<h2>个人信息反馈</h2>
<label>姓名：</label>
<input type="text" id="nameInput" placeholder="请输入姓名">
<br>
<label>年龄：</label>
<input type="number" id="ageInput" placeholder="请输入年龄">
<br>
<br>
<div id="output"></div>
<script>
function showFeedback() {
const name = document.getElementById('nameInput').value.trim();
const age = document.getElementById('ageInput').value;
if (name && age) {
const feedback = `
<p>个人信息：${name}, 年龄为${age}岁。</p>`;
document.getElementById('output').textContent = feedback;
} else {
document.getElementById('output').textContent = "请输入姓名和年龄信息.";
}
}
// 通过监听输入事件触发反馈
document.getElementById('nameInput').addEventListener('input', showFeedback);
document.getElementById('ageInput').addEventListener('input', showFeedback);
</script>
</body>
</html>
2. 使用Python实现前端交互
由于问题描述中明确要求使用前端页面技术，且代码需在本地环境中运行，因此示例代码使用Python处理前端交互。具体实现如下：
# 本地环境中运行的Python代码示例
import sys
def main():
name = input("请输入姓名：")
age = int(input("请输入年龄："))
print(f"个人信息：{name}, 年龄为{age}岁。")
if __name__ == "__main__":
main()
总结
该项目通过HTML、CSS和JavaScript实现用户输入与反馈信息的交互功能，确保数据正确性并提供清晰的反馈。代码示例展示如何读取用户输入并保存为变量，使用JavaScript实现前端交互。该项目具备可测试性，适合中级开发者完成，有助于提升前端开发能力。