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

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

news 文章来源：https://blog.csdn.net/w11111xxxl/article/details/140898960 2025/4/8 5:52:24

实现

  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

超越标注：合成数据引领下的文本嵌入技术革新

论文：https://arxiv.org/pdf/2401.00368代码：https://github.com/microsoft/unilm/tree/master/e5机构：微软领域：嵌入模型发表：BAAI 2024这篇论文的标题是《Improving Text Embeddings with Large Language Models》，由微软公司的Liang Wang, Nan Yang, Xiaolong Huang, …...

编程日记 2024/8/5 2:58:34

IT运维中，如何快速进行故障排查？（以银行APP交易故障为例）

一、事件背景 正值"五一"黄金周旅游高峰期&#xff0c;某城商行的手机APP突然出现大面积交易失败和严重卡顿现象。据初步统计&#xff0c;从上午10点开始APP的交易成功率从正常的99%骤降至75%左右&#xff0c;用户反馈的交易失败投诉量在短短2小时内激增了500%。与此…...

编程日记 2024/8/5 2:56:30

入门mem0.NET

入门mem0.NET 安装包 如果你的项目使用了EntityFrameworkCore,那么你可以跟随这个教程走 <ItemGroup><PackageReference Include"mem0.NET" Version"0.1.7" /><PackageReference Include"mem0.NET.Qdrant" Version"0.1.7…...

编程日记 2024/8/5 2:54:28

虚拟机（CentOS7）安装jenkins

centos7安装jenkins 前提条件&#xff0c;安装jdk与maven 1、JDK17安装 # 进入系统管理员 sudo root # 进入对应文件夹下 cd /usr/local # 下载jdk17 wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.rpm # rpm命令安装下载的jdk17 rpm -ivh jdk-17_li…...

编程日记 2024/8/5 2:53:28

尚品汇-首页三级分类实现-nginx静态代理生成的静态页面（二十六）

目录&#xff1a; &#xff08;1&#xff09;问题详解 &#xff08;2&#xff09;首页商品分类实现 &#xff08;3&#xff09;修改web-all模块 &#xff08;4&#xff09;页面渲染 &#xff08;1&#xff09;问题详解 &#xff08;2&#xff09;首页商品分类实现 前面做了…...

编程日记 2024/8/5 2:52:27

对象存储及其相关概念介绍

对象存储是一种用来描述解决和处理离散单元&#xff08;这些离散单元被称作为对象&#xff09;的方法的通用术语。以下是关于对象存储的详细解析&#xff1a; 一、基本概念 定义&#xff1a;对象存储&#xff0c;也叫做基于对象的存储&#xff0c;是一种将数据以对象的形式进…...

编程日记 2024/8/5 2:48:22

TypeScript 研发系列

#TypeScript 编写HTML 游戏...

编程日记 2024/8/5 2:47:21

三维世界，一图打尽！Matplotlib带你玩转3D绘图，让数据跳舞的魔法棒！

1. 引言 嘿&#xff0c;亲爱的数据探险家们&#xff01;你们是否曾梦想过&#xff0c;在二维的屏幕上&#xff0c;让数据跳出束缚&#xff0c;翩翩起舞&#xff0c;展现它那迷人的三维身姿&#xff1f;今天&#xff0c;就让我这位自封的‘数据魔术师’&#xff0c;带你解锁Mat…...

编程日记 2024/8/5 2:45:19

计算机常识与NOIP历史-CSP初赛知识点整理

真题练习 [2021-CSP-J-第2题] 以下奖项与计算机领域最相关的是&#xff08; &#xff09;。 A.奥斯卡奖 B.图灵奖 C.诺贝尔奖 D.普利策奖 [2017-NOIP-第7题] 中国计算机学会于( )年创办全国青少年计算机程序设计竞赛。 A. 1983 B. 1984 C. 1985 D. 1986 [2018-NOIP-第5题…...

编程日记 2024/8/5 2:44:18

代码随想录算法训练营第二天 | 209. 长度最小的子数组、59. 螺旋矩阵 II

目录 209. 长度最小的子数组1、题目描述2、思路3、code4、复杂度分析 LC59 螺旋矩阵 II1、题目描述2、思路3、code4、复杂度分析 209. 长度最小的子数组 题目链接&#xff1a;209 1、题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。找出该数组中满足其总和大于…...

编程日记 2024/8/5 2:43:17