设计一个功能相对比较简单的教务系统查询网页,功能为学生通过选择年份、学期、课程来查询自己某门/些课程的成绩,得到分数和等级(优良中及差)评价结果。 提交相应的HTML5文件(html)、CSS文件(style.css)以及JavaScript文件(myscript.js)
时间: 2024-11-27 20:17:55 浏览: 18
设计一个简单的教务系统查询网页,我们可以按照以下步骤创建:
**index.html (HTML 文件)**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>教务成绩查询</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>教务成绩查询</h1>
<form id="searchForm">
<label for="year">年份:</label>
<input type="number" id="year" required>
<label for="semester">学期:</label>
<select id="semester" required>
<option value="">请选择</option>
<option value="1">春季</option>
<option value="2">夏季</option>
<option value="3">秋季</option>
</select>
<label for="course">课程名称:</label>
<input type="text" id="course" required>
<button type="submit">查询成绩</button>
</form>
<div id="results"></div>
</div>
<script src="myscript.js"></script>
</body>
</html>
```
**style.css (CSS 文件,简化版)**
```css
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
form label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
button {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
```
**myscript.js (JavaScript 文件,基础交互部分)**
```javascript
document.getElementById('searchForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交
const year = document.getElementById('year').value;
const semester = document.getElementById('semester').value;
const course = document.getElementById('course').value;
// 模拟异步数据请求,实际应用需要连接数据库或其他服务获取成绩
setTimeout(() => {
let grade;
if (course === '示例课程') { // 这里只是一个占位,替换为真实成绩数据
grade = Math.floor(Math.random() * 100);
if (grade >= 90) {
grade = '优';
} else if (grade >= 75) {
grade = '良';
} else if (grade >= 60) {
grade = '中';
} else {
grade = '差';
}
} else {
grade = '未找到';
}
document.getElementById('results').innerText = `您的 ${course} 成绩:${grade}`;
}, 1000); // 假设查询速度为1秒
});
```
阅读全文