学校查分本地模拟网站,使用html语言编写一个网站
时间: 2024-09-22 18:00:58 浏览: 35
在学校查分本地模拟网站的HTML编写中,你需要创建一个简单的静态页面作为原型。以下是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>学校查分模拟</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>学校查分模拟</h1>
<form id="searchForm">
<label for="studentID">学号:</label>
<input type="text" id="studentID" name="studentID"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<textarea id="historyInput" rows="5" placeholder="输入历史成绩(逗号分隔)"></textarea><br><br>
<button type="submit">查询成绩</button>
</form>
<div id="resultArea" style="display: none;">
<h2>查询结果:</h2>
<p id="scoreDisplay"></p>
</div>
</div>
<script>
document.getElementById('searchForm').addEventListener('submit', function(e) {
e.preventDefault();
const studentID = document.getElementById('studentID').value;
const password = document.getElementById('password').value;
const historyInput = document.getElementById('historyInput').value.split(',');
if (/* 验证输入 */ ) {
// 模拟查询,这里你可以设置一些假数据
const score = calculateScore(studentID, historyInput);
displayResult(score);
} else {
alert("请输入有效的学号和密码");
}
});
function calculateScore(studentID, history) {
// 这里仅作演示,实际应用需从数据库或预设数组中获取分数
return Math.floor(Math.random() * 100); // 返回随机的成绩
}
function displayResult(score) {
document.getElementById('scoreDisplay').innerText = `您的当前成绩是: ${score}`;
document.getElementById('resultArea').style.display = 'block';
}
</script>
</body>
</html>
```
这是一个基础版本,实际应用会涉及到更多的交互和后端数据交互(对于真实的在线查询),但在本地环境,这个HTML文件就足够作为模拟体验。
阅读全文