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

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

news 2025/9/19 9:27:44

实现

  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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/9/14 12:35:19

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/1 17:51:59

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/9/9 22:50:58

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/9/4 1:22:39

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/9/4 8:01:03

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/9/3 20:52:43

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/17 22:23:49

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2025/9/13 5:37:06