当前位置： 首页 > news >正文

JS+H5美观的带搜索的博客文章列表（可搜索多个参数）

news 2025/11/10 13:04:23

实现

  1. 美观的界面（电脑、手机端界面正常使用）
  2. 多参数搜索（文章标题，文章简介，文章发布时间等）
  3. 文章链接跳转

效果图

手机端

在这里插入图片描述

电脑端

在这里插入图片描述

搜索实现

搜索功能实现解释

  1. 定义文章数据:

    • 文章数据保存在一个 JavaScript 数组 articles 中。每篇文章包含以下信息：文章 ID、标题、描述、链接地址、阅读数量、点赞数、收藏数、评论数和发布时间。

  2. 搜索框和按钮:

    • 页面上有一个搜索框（<input> 元素）和一个搜索按钮（<button> 元素）。
    • 搜索按钮的 onclick 属性绑定了一个函数 searchArticles()，这个函数会在点击按钮时被调用。

  3. 搜索功能实现:

    • searchArticles() 函数首先获取用户在搜索框中输入的搜索查询（query），并将其转换为小写以便进行不区分大小写的搜索。
    • 然后，函数通过 Array.prototype.filter() 方法在 articles 数组中筛选出符合查询条件的文章。筛选条件是：文章的标题或描述中包含查询字符串。
    • 如果没有找到符合条件的文章，显示一个提示框 (alert('没有搜索到'))。
    • 如果找到了符合条件的文章，调用 displayArticles() 函数来更新页面显示内容。

  4. 更新显示内容:

    • displayArticles() 函数接收一个文章数组（articleList）作为参数。这个数组包含了需要显示的文章数据。
    • 函数首先清空页面中现有的文章内容（通过将 articles-container 元素的 innerHTML 设置为空）。
    • 然后，为每篇文章创建一个新的 <div> 元素，并根据文章数据设置其内容，包括标题、描述、阅读数量、点赞数、收藏数、评论数和发布时间。
    • 将新创建的文章元素添加到页面中，以显示筛选后的结果。

  5. 初始加载:

    • 当页面加载时，调用 displayArticles(articles) 来显示所有文章。这样用户在页面加载时可以看到所有可用的文章。

源代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>海鸥的博客文章</title><style>body {background-color: #f0f0f0;font-family: "Microsoft YaHei", sans-serif;margin: 0;padding: 0;}.header {background-color: #333;color: white;text-align: center;padding: 20px 0;font-weight: bold;font-size: 24px;}.search-container {display: flex;justify-content: center;margin: 20px 0;}.search-box {border: 1px solid #ddd;border-radius: 20px;padding: 10px;width: 300px;margin-right: 10px;}.search-button {background-color: #007bff;border: none;border-radius: 20px;color: white;padding: 10px 20px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);cursor: pointer;}.article {background-color: white;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);margin: 20px auto;padding: 20px;width: 80%;transition: border 0.3s;cursor: pointer;}.article:hover {border: 2px solid #007bff;}.article-title {font-weight: bold;text-decoration: none;color: black;}.article-title img {height: 20px;margin-left: 10px;vertical-align: middle;}.article-description {color: #555;}.article-meta {color: #888;font-size: 14px;margin-top: 10px;}.divider {border-top: 1px solid #ddd;margin: 10px 0;}</style>
</head>
<body><div class="header">海鸥的博客文章</div><div class="search-container"><input type="text" id="searchInput" class="search-box" placeholder="搜索文章..."><button class="search-button" onclick="searchArticles()">搜索</button></div><div id="articles-container"><!-- Articles will be dynamically inserted here --></div><script>const articles = [{ id: 1, title: "如何用Js存储cookies", description: "这篇文章讲述了如何使用JavaScript语言储存cookies信息", url: "1.html", reads: 113, likes: 50, favorites: 8, comments: 6, date: "2024年8月1日" },{ id: 2, title: "第二篇文章标题", description: "这篇文章的描述内容", url: "2.html", reads: 123, likes: 60, favorites: 10, comments: 7, date: "2024年8月2日" },{ id: 3, title: "第三篇文章标题", description: "这篇文章的描述内容", url: "3.html", reads: 130, likes: 70, favorites: 12, comments: 8, date: "2024年8月3日" }];function displayArticles(articleList) {const container = document.getElementById('articles-container');container.innerHTML = '';articleList.forEach(article => {const articleDiv = document.createElement('div');articleDiv.className = 'article';articleDiv.id = article.id;articleDiv.onclick = () => window.location.href = article.url;articleDiv.innerHTML = `<a href="${article.url}" class="article-title">${article.title} <img src="https://via.placeholder.com/20" alt="图标"></a><p class="article-description"><a href="${article.url}" style="color: inherit; text-decoration: none;">${article.description}</a></p><div class="divider"></div><p class="article-meta">${article.reads}人阅读 ${article.likes}人点赞 ${article.favorites}人收藏 ${article.comments}条评论</p><p class="article-meta">发布于${article.date}</p>`;container.appendChild(articleDiv);});}function searchArticles() {const query = document.getElementById('searchInput').value.toLowerCase();const results = articles.filter(article =>article.title.toLowerCase().includes(query) ||article.description.toLowerCase().includes(query));if (results.length === 0) {alert('没有搜索到');} else {displayArticles(results);}}// Display all articles initiallydisplayArticles(articles);</script>
</body>
</html>

送大家一段话：
笔走龙蛇，意境深远。言之有物，情真意切。
辞藻华丽，意蕴深厚。文思敏捷，才华横溢。
洞若观火，鞭辟入里。文采飞扬，笔力雄健。
行云流水，流畅自然。精辟入里，洞察秋毫。
妙语连珠，引人入胜。深入骨髓，发人深省。
豁然开朗，醍醐灌顶。言之凿凿，掷地金声。
言近旨远，韵味无穷。淋漓尽致，曲尽其妙。
独具匠心，匠心独运。笔底春风，笔下生花。
字字玑珠，句句珠玑。意味深长，耐人寻味。

人话

写作技巧高超，文章意境深远。内容真实感人，情感表达真诚。用词华丽而富有内涵，作者思维敏捷且才华出众。观察事物深刻透彻，分析问题直击要害。文笔生动活泼，才华横溢。文章如同行云流水般流畅自然。分析精辟，能够洞察细微之处。言语中充满智慧，让人读来兴趣盎然。剖析问题深入本质，能引发读者深思。给人以豁然开朗的感觉，像醍醐灌顶一般让人清醒。言辞确凿有力，话语坚定响亮。言简意赅却含义深远，令人回味无穷。表达淋漓尽致，把事情描绘得细致入微。构思独特巧妙，展现了作者的独特匠心。文笔优美，仿佛春风拂面，笔下的文字如同花朵盛开。每个字都精心雕琢，每一句话都充满力量。文章意味深长，值得反复品味。

相关文章：

JS+H5美观的带搜索的博客文章列表（可搜索多个参数）

实现 美观的界面&#xff08;电脑、手机端界面正常使用&#xff09;多参数搜索&#xff08;文章标题&#xff0c;文章简介&#xff0c;文章发布时间等&#xff09;文章链接跳转 效果图 手机端 电脑端 搜索实现 搜索功能实现解释 定义文章数据: 文章数据保存在一个 JavaScri…...

编程日记 2024/8/5 3:33:12

牛客周赛 Round 54 (c++题解)

比赛地址 : 牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ A 输出o的个数&#xff1b; #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \n using namespace std; typedef long long LL;inlin…...

编程日记 2024/8/5 3:32:11

htsjdk库Genotype及相关类介绍

在 HTSJDK 库中，处理基因型的主要类包括 Genotype、FastGenotype、GenotypeBuilder 以及相关的类和接口。以下是这些类和接口的详细介绍： Genotype 类 主要功能 表示基因型：Genotype 类用于表示个体在特定变异位置上的基因型。基因型是对个体在变异位置上的等位基因组合的…...

编程日记 2024/8/5 3:29:08

C++ 最短路（spfa） 洛谷

拉近距离 题目背景 我是源点&#xff0c;你是终点。我们之间有负权环。 ——小明 题目描述 在小明和小红的生活中&#xff0c;有 N 个关键的节点。有 M 个事件&#xff0c;记为一个三元组 (Si,Ti,Wi)&#xff0c;表示从节点 Si​ 有一个事件可以转移到 Ti​&#xff0c;事件…...

编程日记 2024/8/5 3:28:06

MySQL的数据类型

文章目录 数据类型分类整型bit类型浮点类型字符串类型charvarchar 日期和时间类型enum和set find_ in_ set 数据类型分类 整型 在MySQL中&#xff0c;整型可以指定是有符号的和无符号的&#xff0c;默认是有符号的。 可以通过UNSIGNED来说明某个字段是无符号的。 在MySQL中如…...

编程日记 2024/8/5 3:27:05

xss漏洞（四，xss常见类型）

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言&#xff1a; 1&#xff0c;本文基于dvwa靶场以及PHP study进行操作&#xff0c;靶场具体搭建参考上一篇&#xff1a; xss漏洞&#xff08;二&#xff0c;xss靶场搭建以及简单…...

编程日记 2024/8/5 3:26:04

繁简之争：为什么手机芯片都是 ARM

RISC 和 CISC 指令集 之前的文章《揭秘 CPU 是如何执行计算机指令的》中说到&#xff0c;如果从软件的角度来讲&#xff0c;CPU 就是一个执行各种计算机指令&#xff08;Instruction Code&#xff09;的逻辑机器。 计算机指令集是计算机指令的集合&#xff0c;包括各种类型的…...

编程日记 2024/8/5 3:25:03

【nnUNetv2进阶】十九、nnUNetv2 使用ResidualEncoder训练模型

nnunet使用及改进教程。 【nnUNetv2实践】一、nnUNetv2安装 【nnUNetv2实践】二、nnUNetv2快速入门-训练验证推理集成一条龙教程 【nnUNetv2进阶】三、nnUNetv2 自定义网络-发paper必会-CSDN博客 其他网络改进参考： 【nnUNetv2进阶】四、nnUNetv2 魔改网络-小试牛刀-加入…...

编程日记 2024/8/5 3:21:58

Unity3D ShaderGraph 场景扫描光效果实现详解

引言 在Unity3D游戏开发中&#xff0c;创建吸引人的视觉效果是提升游戏沉浸感的关键之一。场景扫描光效果&#xff0c;作为一种动态且富有表现力的视觉元素&#xff0c;能够为游戏场景增添不少亮点。通过Unity的ShaderGraph工具&#xff0c;我们可以轻松地实现这种效果&#x…...

编程日记 2024/8/5 3:20:57

JS中运算符优先级

优先级顺序从高到低为&#xff1a; 括号 ()成员访问 . 和 函数调用 ()一元运算符 !、、-、~乘法 *、除法 /、取余 %加法 、减法 -位移运算符 <<、>>、>>>比较运算符 <、<、>、>等于 、不等于 !、严格等于 、严格不等于 !位与 &位异或 ^位…...

编程日记 2024/8/5 3:19:56

分享6款有助于写论文能用到的软件app！

在学术写作中&#xff0c;选择合适的软件和工具可以大大提高效率和质量。以下是六款有助于写论文的软件app推荐&#xff0c;其中特别重点介绍千笔-AIPassPaPer这款AI原创论文写作平台。 1. 千笔-AIPassPaPer 千笔-AIPassPaPer是一款功能全面且高效的AI原创论文写作平台。它能…...

编程日记 2024/8/5 3:18:55

Python图形验证码的识别：一步步详解

在Web开发和自动化测试中&#xff0c;图形验证码的识别是一项常见且重要的任务。图形验证码作为防止自动化攻击的一种手段&#xff0c;通过随机生成包含字符或数字的图片来增加用户验证的难度。然而&#xff0c;对于需要自动化处理的场景&#xff0c;如Web自动化测试或爬虫&…...

编程日记 2024/8/5 3:17:53

Jenkins未授权访问漏洞

Jenkins未授权访问漏洞 默认情况下 Jenkins面板中用户可以选择执行脚本界面来操作一些系统层命令&#xff0c;攻击者可通过未授权访问漏洞或者暴力破解用户密码等进入后台管理服务&#xff0c;通过脚本执行界面从而获取服务器权限。 一、使用以下fofa语法进行产品搜索 port&…...

编程日记 2024/8/5 3:16:53

什么情况下跑代码内存才会爆

内存爆掉&#xff08;即内存溢出&#xff09;通常是由于代码在处理数据或计算时消耗了过多的内存资源&#xff0c;导致系统内存不足。以下是一些常见场景和代码示例&#xff0c;可能会导致内存爆掉&#xff1a; 1. 超大数据集加载: 加载非常大的数据集到内存中&#xff08;特…...

编程日记 2024/8/5 3:13:50

基于arcpro3.0.2运行报错问题:不能加载文件System.Text.Encoding.CodePages, Version=8.0.0.0

基于arcpro3.0.2运行报错问题:不能加载文件System.Text.Encoding.CodePages, Version8.0.0.0 报错问题描述&#xff1a; 基于arcpro3.0.2运行报错问题: Could not load file or assembly System.Text.Encoding.CodePages, Version8.0.0.0 解决办法&#xff1a; 重新拷贝打包生…...

编程日记 2024/8/5 3:12:49

elk+filebeat+kafka集群部署

实验框架图 192.168.124.10 es1 192.168.124.20 es2 192.168.124.30 losgtash kibana 192.168.124.50 MySQL nginx httpd 上一篇做完es1和es2以及192.168.124.30的部署 在192.168.124.50做配置部署 开启MySQL、nginx、http 因为nginx和http默认端口为80&#xff0…...

编程日记 2024/8/5 3:11:48

C++生化危机1.5源码

代码特别长&#xff0c;如若报错&#xff0c;请把1e9改成1000000000。 //1.5.12 #include <conio.h> #include <string.h> #include <stdio.h> #include <stdlib.h> #include <windows.h> #include <time.h> #include <direct.h> i…...

编程日记 2024/8/5 3:08:45

RMAN-06618不同版本之间RMAN无法连接

RMAN Active Duplicate Between Two Oracle Versions (Doc ID 2346507.1)​编辑To Bottom In this Document Goal Solution References APPLIES TO: Oracle Database Cloud Schema Service - Version N/A and later Oracle Database Exadata Cloud Machine - Version N/A and…...

编程日记 2024/8/5 3:02:39

鸿蒙HarmonyOS开发：多种内置弹窗及自定义弹窗的详细使用指南

文章目录 一、消息提示框&#xff08;showToast&#xff09;1、导入模块2、语法3、参数4、示例5、效果 二、对话框&#xff08;showDialog&#xff09;1、导入模块2、语法3、参数4、示例5、效果 三、警告弹窗&#xff08;AlertDialog&#xff09;1、语法2、参数3、AlertDialogP…...

编程日记 2024/8/5 3:00:36

Python文件

一、文件的基本概念 1.1 文件类型 文件类型主要分为文本文件和二进制文件。文本文件是由一组特定编码的字符构成的文件&#xff0c;可以由某种文本编辑器对内容进行识别、处理、修改等操作。二进制文件由二进制数“0”和“1”构成&#xff0c;没有统一的字符编码&#xff0c;…...

编程日记 2024/8/5 2:59:35

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/11/9 15:18:28

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/11/8 2:23:52

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/11/7 13:59:49

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/11/9 23:58:30

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/11/7 19:35:44

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51