利用JavaScript制作一个满足大学作业需求的学习网站
时间: 2024-03-15 16:47:06 浏览: 24
好的,以下是一个简单的JavaScript示例,可以让用户在学习网站上搜索课程:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学习网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>学习网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">论文</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<form>
<label for="search">搜索课程:</label>
<input type="text" id="search" name="search">
<input type="submit" value="搜索">
</form>
<section>
<h2>最新课程</h2>
<ul id="course-list">
<li><a href="#">JavaScript基础课程</a></li>
<li><a href="#">HTML/CSS进阶课程</a></li>
<li><a href="#">Python编程课程</a></li>
<li><a href="#">数据结构与算法课程</a></li>
</ul>
</section>
</main>
<footer>
<p>© 学习网站 2021</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码和上面的示例一致。
JavaScript代码:
```
const form = document.querySelector('form');
const input = document.querySelector('#search');
const list = document.querySelector('#course-list');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单提交默认行为
const searchTerm = input.value;
const courses = ['JavaScript基础课程', 'HTML/CSS进阶课程', 'Python编程课程', '数据结构与算法课程'];
// 过滤课程列表,只保留课程名称包含搜索关键词的课程
const filteredCourses = courses.filter((course) => {
return course.toLowerCase().includes(searchTerm.toLowerCase());
});
// 清空课程列表
list.innerHTML = '';
// 根据过滤后的结果重新生成课程列表
filteredCourses.forEach((course) => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = '#';
a.textContent = course;
li.appendChild(a);
list.appendChild(li);
});
input.value = ''; // 清空搜索框
});
```
以上代码实现了一个简单的搜索功能,当用户在搜索框中输入关键词并提交表单时,会根据关键词过滤课程列表,并重新生成展示在页面上。当然,这只是一个简单的示例,实际情况中还需要根据具体需求进行更加详细和复杂的开发工作。