页面效果如上，含有标题，搜索框和一些超链接，在搜索框输入一些文字可以在下方显示含有这些文字的超链接。这里的搜索不仅可以中文，还可以是英文，数字
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Search Links</h1>
<input type="text" id="searchBox" placeholder="Search...">
<div id="linksContainer">
<a href="勒让德.html" class="link">勒让德多项式</a><br>
<a href="https://www.example2.com" class="link">Example 2</a><br>
<a href="https://www.example3.com" class="link">Example 3</a><br>
<!-- 可以根据需要添加更多链接 -->
</div>
<script src="search.js"></script>
</body>
</html>JS代码如下
document.getElementById('searchBox').addEventListener('keyup', function(event) {
const searchTerm = event.target.value.toLowerCase();
const links = document.querySelectorAll('#linksContainer .link');
links.forEach(link => {
if (link.textContent.toLowerCase().includes(searchTerm)) {
link.classList.remove('hidden');
} else {
link.classList.add('hidden');
}
});
});css代码如下
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.app-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.hidden { display: none; }