Skip to content

Commit 38c56b3

Browse files
PythonnotJavaPythonnotJava
authored
Update Implementation_of_data _structures_and_algorithms.js
1 parent 68f3248 commit 38c56b3

1 file changed

Lines changed: 205 additions & 90 deletions

File tree

‎src/js/Implementation_of_data _structures_and_algorithms.js‎

Lines changed: 205 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,215 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>博客列表</title>
6-
<style>
7-
/* 搜索框样式 */
8-
.search-container {
9-
margin-bottom: 20px;
10-
text-align: center;
11-
}
12-
13-
.search-input {
14-
width: 400px;
15-
padding: 5px;
16-
margin-right: 10px;
17-
18-
}
19-
/* 返回按钮样式 */
20-
.return-button {
21-
padding: 5px;
1+
// 博客列表数据
2+
const blogList = [
3+
{
4+
title: '重新排序算法',
5+
content: '重新学排序算法，包括直接排序、希尔排序、什么是堆、快速排序等等等……',
6+
icon: 'https://th.bing.com/th/id/R.90dd096532f7ee7b370af250f93f0b19?rik=Jz6godksJOXfKg&pid=ImgRaw&r=0',
7+
link: '../../h5/sjjg/排序.html'
8+
},
9+
{
10+
title: '重新学树结构',
11+
content: '重新学树结构，包括二叉树、二叉树遍历算法、线索二叉树、哈夫曼编码……',
12+
icon: 'https://img-blog.csdnimg.cn/7b943421c19c4c7ca3928d66a0f1d9dc.jpeg#pic_center',
13+
link: '../../h5/sjjg/retree.html'
14+
},
15+
{
16+
title: '重新学图结构',
17+
content: '重新学图结构，包括概念、深度优先遍历、广度优先遍历、Prim算法、拓扑排序……',
18+
icon: 'https://img-blog.csdnimg.cn/34be94321c754413a42a4655debf142f.jpeg#pic_center',
19+
link: '../../h5/sjjg/regraph.html'
20+
},
21+
{
22+
title: 'C++面向对象实现稀疏矩阵的三元组表示',
23+
content: '使用C++手搓一个矩阵，能够矩阵转置、行列式求值、初等变换、逆矩阵、伴随矩阵求取等等等',
24+
icon: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.JDKxAR-ti_KYYS9PObNpbgHaFG?pid=ImgDet&rs=1',
25+
link: '../../h5/sjjg/C++面向对象实现稀疏矩阵的三元组表示.html'
26+
},
27+
{
28+
title: '使用C++手搓一个矩阵',
29+
content: '使用C++手搓一个矩阵，能够矩阵转置、行列式求值、初等变换、逆矩阵、伴随矩阵求取等等等',
30+
icon: 'https://ts2.cn.mm.bing.net/th?id=OSK.98fe6647469a7ad3487d6274db57825a&w=188&h=132&c=7&o=6&dpr=1.3&pid=SANGAM',
31+
link: '../../h5/sjjg/手搓矩阵.html'
32+
},
33+
{
34+
title: '串结构',
35+
content: 'C++面向对象实现串，使用顺序存储的存储结构（附源代码）',
36+
icon: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.31vNg59mc0tJYE07qp_8ygHaCX?w=314&h=111&c=7&r=0&o=5&dpr=1.4&pid=1.7',
37+
link: '../../h5/sjjg/C++面向对象实现串，使用顺序存储的存储结构（附源代码）.html'
38+
},
39+
{
40+
title: '邻接表图',
41+
content: '基于C++实现邻接表来表示图结构',
42+
icon: 'https://ts1.cn.mm.bing.net/th/id/R-C.8120cd354de7f107e88f25d41be15540?rik=82jalkofwWVAIQ&riu=http%3a%2f%2fimage.mamicode.com%2finfo%2f201901%2f20190128195839913108.png&ehk=tYOlVwqstfAfIQ3lIg2VNrq1Ct%2fPCfGOHdRH2PCX81A%3d&risl=&pid=ImgRaw&r=0',
43+
link: '../../h5/sjjg/C++实现邻接表来表示图结构（附源代码）.html'
44+
},
45+
{
46+
title: '可视化二叉树',
47+
content: 'C++顺序存储实现二叉树并可视化（附源代码）',
48+
icon: 'https://pic3.zhimg.com/v2-400b251b664b915d44eca03351b1177a_r.jpg',
49+
link: '../../h5/sjjg/C++顺序存储实现二叉树并可视化（附源代码）.html'
50+
},
51+
{
52+
title: '顺序栈',
53+
content: '基于C++的顺序栈的实现（附源代码）',
54+
icon: 'https://www.maxing128.com/wp-content/uploads/2017/10/SqStackPush.png',
55+
link: '../../h5/sjjg/C++顺序栈的实现.html'
56+
},
57+
{
58+
title: '邻接矩阵-图',
59+
content: '基于C++实现邻接矩阵表示的图结构（附源代码）',
60+
icon: 'https://sslprod.oss-cn-shanghai.aliyuncs.com/stable/slides/kaqmsk/kaqmsk_1440-28.jpg',
61+
link: '../../h5/sjjg/基于C++实现邻接矩阵表示的图结构（附源代码）.html'
62+
},
63+
{
64+
title: '矩阵与行列式',
65+
content: 'C++面向对象实现矩阵（包含行列式）的一些操作（附源代码）',
66+
icon: 'https://th.bing.com/th/id/R.af12dd5d78d0e8f5b1e6d09218791d3c?rik=lHY7Jkphzy0CPw&pid=ImgRaw&r=0',
67+
link: '../../h5/sjjg/C++面向对象实现矩阵（包含行列式）的一些操作（附源代码）.html'
68+
},
69+
{
70+
title: '多项式',
71+
content: '基于C++顺序存储实现多项式操作',
72+
icon: 'https://pic3.zhimg.com/v2-499e0b5a82d3e59ee0c9e949f15c8ea6_r.jpg',
73+
link: '../../h5/sjjg/C++面向对象+顺序表实现多项式的一些基本操作（附源代码）.html'
74+
},
75+
{
76+
title: '带头结点的单链表',
77+
content: 'C++面向对象技术实现带头结点的单链表',
78+
icon: 'https://ts1.cn.mm.bing.net/th/id/R-C.ba9cee382124e480954a107f58a914af?rik=fBHuGF6gPq0gpw&riu=http%3a%2f%2fbbs.yanzhishi.cn%2fimage%2fshow%2fattachments-2020-06-R4dmYSKD5edf4d0085a27.png&ehk=wvVRU90U3a4PIjy6LfqyxK7PbvEfFxwa49BJuzl8zAA%3d&risl=&pid=ImgRaw&r=0',
79+
link: '../../h5/sjjg/C++面向对象技术实现带头结点的单链表.html'
80+
},
81+
{
82+
title: '链栈',
83+
content: '基于C++链栈的实现（附源代码）',
84+
icon: 'https://www.yht7.com/upload/image/2021/05/20/2021520101811926.png',
85+
link: '../../h5/sjjg/C++链栈的实现（附源代码）.html'
86+
},
87+
{
88+
title: '顺序存储-队列',
89+
content: '基于C++面向对象技术实现顺序队列',
90+
icon: 'https://pic4.zhimg.com/80/v2-cf1c5c40578f002a8480b3475ce36a63_qhd.jpg',
91+
link: '../../h5/sjjg/基于C++面向对象技术实现顺序队列（附源代码）.html'
92+
},
93+
{
94+
title: '顺序存储-线性表',
95+
content: 'C++实现顺序线性表（附源代码）',
96+
icon: 'https://pic4.zhimg.com/v2-ef9c513a7a4f197144321a9c79697dbb_b.png',
97+
link: '../../h5/sjjg/C++实现顺序线性表（附源代码）.html'
98+
},
99+
{
100+
title: '链式存储-二叉树',
101+
content: 'C++链式存储实现二叉树（附源代码）',
102+
icon: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.4wnL0Y7nHnbT0i9PrwNvQQHaEl?pid=ImgDet&rs=1',
103+
link: '../../h5/sjjg/C++链式存储实现二叉树（附源代码）.html'
104+
},
105+
{
106+
title: '十字链表表示有向图',
107+
content: 'C++实现十字链表来表示有向图（附源代码）',
108+
icon: 'https://www.jxtxzzw.com/wp-content/uploads/2018/01/20170222122117558-1920x1314.jpg',
109+
link: '../../h5/sjjg/C++实现十字链表来表示有向图（附源代码）.html'
110+
},
111+
{
112+
title: '深度搜索算法',
113+
content: '使用C++，基于邻接矩阵实现深度优先算法（附源代码）',
114+
icon: 'https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDA2Mjk5LWQ4Y2E5ODQ2MjMzNGRhOWIucG5n?x-oss-process=image/format,png',
115+
link: '../../h5/sjjg/使用C++，基于邻接矩阵实现深度优先算法（附源代码）.html'
116+
},
117+
{
118+
title: 'Prim算法',
119+
content: '基于C++无向网邻接表实现Prim算法(附源代码)',
120+
icon: 'https://pic4.zhimg.com/80/v2-b589c7cd61067b56b2ee886329916207_720w.webp',
121+
link: '../../h5/sjjg/基于C++无向网邻接表实现Prim算法(附源代码).html'
122+
},
123+
{
124+
title: '二维数组',
125+
content: '基于C语言动态的创建二维数组，可以自动扩容并且获取每行长度',
126+
icon: 'https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcxMDI1MTk1OTA0MjQ0?x-oss-process=image/format,png',
127+
link: '../../h5/sjjg/基于C语言动态的创建二维数组，可以自动扩容并且获取每行长度.html'
128+
},
129+
{
130+
title: '带头结点的循环链表',
131+
content: 'C++面向对象实现带头结点的循环链表（附源代码）',
132+
icon: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.QR4BLR-vXNA2cZcZwsf0GQHaER?w=260&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
133+
link: '../../h5/sjjg/C++面向对象实现带头结点的循环链表（附源代码）.html'
134+
}
135+
];
22136

23-
}
24-
.search-button {
25-
padding: 5px;
26-
}
137+
const blogListContainer= document.getElementById('blogListContainer');
27138

28-
/* 外部容器样式 */
29-
.blog-list-container {
30-
display: flex;
31-
flex-wrap: wrap;
32-
justify-content: center;
33-
align-items: flex-start;
139+
// 初始化博客列表
140+
function initBlogList() {
141+
blogListContainer.innerHTML = '';
142+
blogList.forEach(blog => {
143+
const blogCard = document.createElement('div');
144+
blogCard.className = 'blog-card';
145+
// 添加链接
146+
const link = document.createElement('a');
147+
link.href = blog.link;
148+
// 创建博客图标元素
149+
const icon = document.createElement('img');
150+
icon.className = 'blog-icon';
151+
icon.src = blog.icon;
152+
// 创建博客内容元素
153+
const content = document.createElement('div');
154+
content.className = 'blog-content';
155+
// 创建博客标题元素
156+
const title = document.createElement('div');
157+
title.className = 'blog-title';
158+
title.textContent = blog.title;
159+
// 创建博客描述元素
160+
const description = document.createElement('div');
161+
description.className = 'blog-description';
162+
description.textContent = blog.content;
163+
// 将元素添加到DOM中
164+
content.appendChild(title);
165+
content.appendChild(description);
166+
link.appendChild(icon);
167+
link.appendChild(content);
168+
blogCard.appendChild(link);
169+
blogListContainer.appendChild(blogCard);
170+
});
171+
}
172+
// 搜索功能
173+
function searchBlog() {
174+
const keyword = document.getElementById('searchInput').value;
175+
const blogCards = document.getElementsByClassName('blog-card');
176+
Array.from(blogCards).forEach(blogCard => {
177+
const title = blogCard.querySelector('.blog-title').textContent; // 获取标题文本内容
178+
const description = blogCard.querySelector('.blog-description').textContent; // 获取描述文本内容
179+
if (title.includes(keyword) || description.includes(keyword)) {
180+
blogCard.style.display = 'flex';
181+
// 关键字高亮显示
182+
const regex = new RegExp(`(${keyword})(?![^<]*>|[^<>]*<\/a>)`, 'gi');
183+
blogCard.innerHTML = blogCard.innerHTML.replace(regex, '<span class="highlight">$1</span>');
184+
// console.log(blogCard.innerHTML);
185+
} else {
186+
blogCard.style.display = 'none';
34187
}
188+
});
189+
}
35190

36-
/* 博客卡片样式 */
37-
.blog-card {
38-
width: calc(50% - 20px);
39-
margin: 10px;
40-
padding: 20px;
41-
background-color: #f0f0f0;
42-
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
43-
display: flex;
44-
align-items: center;
45-
border-radius: 10px;
46-
box-shadow: 0 0 5px 5px #fff;
47-
transition: transform .3s;
48-
}
49191

50-
/* 左侧图标样式 */
51-
.blog-icon {
52-
float: left;
53-
margin-bottom: 20px;
54-
width: 120px;
55-
border-radius: 15px;
56-
height: 120px;
192+
// 返回按钮功能
193+
function returnToAllBlogs() {
194+
const blogCards = document.getElementsByClassName('blog-card');
195+
Array.from(blogCards).forEach(blogCard => {
196+
blogCard.style.display = 'flex';
197+
blogCard.innerHTML = blogCard.innerHTML.replace('<span class="highlight">', '').replace('</span>', '');
198+
});
57199
}
58200

59-
/* 右侧内容样式 */
60-
.blog-content {
61-
flex-grow: 1;
62-
float: left;
63-
padding-left: 10px;
64-
color: darkblue;
65-
}
201+
// 添加搜索按钮点击事件
202+
document.getElementById('searchButton').addEventListener('click', searchBlog);
66203

67-
/* 标题样式 */
68-
.blog-title {
69-
font-size: 18px;
70-
font-weight: bold;
71-
margin-bottom: 10px;
72-
}
204+
// 添加回车键事件，触发搜索功能
205+
document.getElementById('searchInput').addEventListener('keydown', (event) => {
206+
if (event.key === 'Enter') {
207+
searchBlog();
208+
}
209+
});
73210

74-
/* 内容样式 */
75-
.blog-description {
76-
font-size: 14px;
77-
color: #777;
78-
}
211+
// 添加返回按钮点击事件
212+
document.getElementById('returnButton').addEventListener('click', returnToAllBlogs);
79213

80-
/* 关键字高亮样式 */
81-
.highlight {
82-
background-color: yellow;
83-
font-weight: bold;
84-
}
85-
body {
86-
background-color: tan;
87-
}
88-
</style>
89-
</head>
90-
<body>
91-
<div class="search-container">
92-
<input type="text" class="search-input" id="searchInput" placeholder="输入关键字搜索博客">
93-
<button class="search-button" id="searchButton">搜索</button>
94-
<button class="return-button" id="returnButton">返回</button>
95-
</div>
96-
<div class="blog-list-container" id="blogListContainer"></div>
97-
<script src="../../js/Implementation_of_data%20_structures_and_algorithms.js">
98-
</script>
99-
</body>
100-
</html>
214+
// 初始化博客列表
215+
initBlogList();

0 commit comments

Comments
 (0)