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

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

news 2025/11/10 14:24:58

实现

  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

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/11/7 21:04:03

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/11/7 15:37:10

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/11/7 15:38:07

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2025/11/9 4:48:41

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

编程新知 2025/7/6 4:23:14

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40