手机端课表查询代码
时间: 2023-07-09 16:22:03 浏览: 46
以下是一个简单的手机端课表查询代码,使用HTML、CSS和JavaScript编写:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课表查询</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>课表查询</h1>
<form>
<label for="week">选择周次:</label>
<select id="week">
<option value="1">第一周</option>
<option value="2">第二周</option>
<option value="3">第三周</option>
<option value="4">第四周</option>
<option value="5">第五周</option>
<option value="6">第六周</option>
<option value="7">第七周</option>
<option value="8">第八周</option>
<option value="9">第九周</option>
<option value="10">第十周</option>
<option value="11">第十一周</option>
<option value="12">第十二周</option>
<option value="13">第十三周</option>
<option value="14">第十四周</option>
<option value="15">第十五周</option>
<option value="16">第十六周</option>
<option value="17">第十七周</option>
<option value="18">第十八周</option>
<option value="19">第十九周</option>
<option value="20">第二十周</option>
</select>
<button type="button" id="search-btn">查询</button>
</form>
<div id="schedule"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 20px;
}
form {
margin-top: 20px;
text-align: center;
}
label {
font-weight: bold;
}
select {
margin-left: 10px;
}
button {
margin-left: 10px;
}
#schedule {
margin-top: 20px;
text-align: center;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
table td {
border: 1px solid #ccc;
padding: 10px;
}
table td:first-child {
width: 80px;
}
table td:nth-child(2) {
width: 100px;
}
table td:nth-child(3) {
width: 120px;
}
table td:nth-child(4) {
width: 150px;
}
table td:nth-child(5) {
width: 200px;
}
```
JavaScript代码:
```
const scheduleData = [
{week: 1, day: '周一', time: '1-2节', course: '高等数学', teacher: '张三'},
{week: 1, day: '周一', time: '3-4节', course: '英语', teacher: '李四'},
{week: 1, day: '周二', time: '1-2节', course: 'C语言', teacher: '王五'},
{week: 1, day: '周二', time: '3-4节', course: '体育', teacher: '赵六'},
{week: 1, day: '周三', time: '1-2节', course: '线性代数', teacher: '张三'},
{week: 1, day: '周三', time: '3-4节', course: '英语', teacher: '李四'},
{week: 1, day: '周四', time: '1-2节', course: 'C语言', teacher: '王五'},
{week: 1, day: '周四', time: '3-4节', course: '体育', teacher: '赵六'},
{week: 1, day: '周五', time: '1-2节', course: '高等数学', teacher: '张三'},
{week: 1, day: '周五', time: '3-4节', course: '线性代数', teacher: '李四'},
{week: 1, day: '周六', time: '1-2节', course: 'C语言', teacher: '王五'},
{week: 1, day: '周六', time: '3-4节', course: '体育', teacher: '赵六'},
{week: 1, day: '周日', time: '1-2节', course: '高等数学', teacher: '张三'},
{week: 1, day: '周日', time: '3-4节', course: '线性代数', teacher: '李四'},
];
const searchBtn = document.getElementById('search-btn');
const scheduleDiv = document.getElementById('schedule');
searchBtn.addEventListener('click', function() {
const week = document.getElementById('week').value;
const schedule = scheduleData.filter(item => item.week == week);
if (schedule.length == 0) {
scheduleDiv.innerHTML = '<p>暂无课程安排</p>';
} else {
let tableHtml = '<table><tr><th>周次</th><th>星期</th><th>节次</th><th>课程</th><th>教师</th></tr>';
for (let item of schedule) {
tableHtml += `<tr><td>${item.week}</td><td>${item.day}</td><td>${item.time}</td><td>${item.course}</td><td>${item.teacher}</td></tr>`;
}
tableHtml += '</table>';
scheduleDiv.innerHTML = tableHtml;
}
});
```
这个代码使用了一个数组来存储课程表数据,当用户选择一个周次并点击查询按钮时,根据选择的周次过滤出该周的课程安排,并用HTML表格的形式展示出来。你可以根据实际情况修改代码以适应你的课程表格式和数据。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)