HTML+CSS+JS带搜索的博客文章列表

news/2024/8/22 3:20:36 标签: html, css, 前端, javascript, css3
htmledit_views">

添加文章数据方法:找到代码js部分,找到文章信息数组,即可添加/修改。

源代码在图片后面   点赞❤️+收藏⭐️+关注😍

效果图  

05bd21530f734451bc24f7b8a34b2e90.jpg

源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带搜索的博客文章列表</title>
<style>
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .search-container {
    display: flex;
    margin-bottom: 20px;
    width: 90%;
    max-width: 600px;
  }
  .search-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
  }
  .search-button {
    padding: 10px;
    border: none;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    background-color: black;
    color: white;
    cursor: pointer;
  }
  table {
    width: 90%;
    max-width: 600px;
    border-collapse: collapse;
    border: 1px solid #ccc;
    margin-top: 20px;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
  .table-row {
    display: none;
  }
  .category {
    display: flex;
    justify-content: space-between;
  }
  .category div {
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
  }
  .orange {
    background-color: #ffa500;
  }
  .red {
    background-color: #ff0000;
  }
  .blue {
    background-color: #0000ff;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:nth-child(odd) {
    background-color: #ffffff;
  }
</style>
</head>
<body>
<div class="search-container">
  <input type="text" id="search-input" class="search-input">
  <button id="search-button" class="search-button">搜索</button>
</div>
<table id="articles-table">
  <tr>
    <th>文章名</th>
    <th>类别</th>
    <th>日期</th>
    <th>作者</th>
  </tr>
</table>
<script>
  const articles = [
    { link: "book1.html", name: "文章1", author: "作者1", date: "2024年1月3日", type1: "前端", type2: "开源", type3: "VUE" },
    { link: "book2.html", name: "文章2", author: "作者2", date: "2024年2月14日", type1: "后端", type2: "Python", type3: "Django" },
    { link: "book3.html", name: "文章3", author: "作者3", date: "2024年3月25日", type1: "全栈", type2: "JavaScript", type3: "Node.js" },
    { link: "book4.html", name: "文章4", author: "作者4", date: "2024年4月7日", type1: "前端", type2: "React", type3: "Redux" },
    { link: "book5.html", name: "文章5", author: "作者5", date: "2024年5月19日", type1: "移动开发", type2: "iOS", type3: "Swift" },
    { link: "book6.html", name: "文章6", author: "作者6", date: "2024年6月1日", type1: "移动开发", type2: "Android", type3: "Kotlin" },
  ];

  const table = document.getElementById('articles-table');

  // Function to display articles based on search input
  function displayArticles(searchText) {
    // Clear existing table rows except the header
    while (table.rows.length > 1) {
      table.deleteRow(1);
    }

    // Search and display matching articles
    articles.forEach(article => {
      if (article.name.includes(searchText)) {
        const row = table.insertRow(-1);
        row.innerHTML = `
          <td><a href="${article.link}" style="text-decoration: none; color: black;">${article.name}</a></td>
          <td class="category">
            <div class="orange">${article.type1}</div>
            <div class="red">${article.type2}</div>
            <div class="blue">${article.type3}</div>
          </td>
          <td>${article.date}</td>
          <td>${article.author}</td>
        `;
      }
    });
  }

  // Event listener for search button click
  document.getElementById('search-button').addEventListener('click', function() {
    const searchText = document.getElementById('search-input').value.trim().toLowerCase();
    displayArticles(searchText);
  });

  // Event listener for Enter key press in search input
  document.getElementById('search-input').addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
      const searchText = document.getElementById('search-input').value.trim().toLowerCase();
      displayArticles(searchText);
    }
  });

  // Initial display of all articles when the page loads
  displayArticles('');
</script>

</body>
</html>


http://www.niftyadmin.cn/n/5556118.html

相关文章

springboot 适配ARM 架构

下载对应的maven https://hub.docker.com/_/maven/tags?page&page_size&ordering&name3.5.3-alpinedocker pull maven:3.5.3-alpinesha256:4c4e266aacf8ea6976b52df8467134b9f628cfed347c2f6aaf9e6aff832f7c45 2、下载对应的jdk https://hub.docker.com/_/o…

区块链与云计算的融合:新时代数据安全的挑战与机遇

随着信息技术的迅猛发展&#xff0c;云计算和区块链技术作为两大前沿技术在各自领域内展示出了巨大的潜力。而它们的结合&#xff0c;即区块链与云计算的融合&#xff0c;正在成为数据安全领域的新趋势。本文将探讨这一融合对数据安全带来的挑战和机遇&#xff0c;以及其在企业…

C++版OpenCV_01_图像数字化

图像数字化&#xff0c;持续更新中 OpenCV中Mat类中的常用函数 OpenCV中Mat类中的常用函数 读入图像 #include<opencv2/core.hpp> #include<opencv2/highgui.hpp> using namespace std;int main(int argc,char*argv[]) {// 读入原始图像Mat img imread(argv[1],…

C++ 类和对象 赋值运算符重载

前言&#xff1a; 在上文我们知道数据类型分为自定义类型和内置类型&#xff0c;当我想用内置类型比较大小是非常容易的但是在C中成员变量都是在类(自定义类型)里面的&#xff0c;那我想给类比较大小那该怎么办呢&#xff1f;这时候运算符重载就出现了 一 运算符重载概念&…

论文翻译:Explainability for Large Language Models: A Survey

https://arxiv.org/pdf/2309.01029 目录 可解释性在大型语言模型中&#xff1a;一项调查摘要1 引言2 LLMs的训练范式2.1 传统微调范式2.2 提示范式 3 传统微调范式的解释3.1 局部解释3.1.1 基于特征归因的解释3.1.2 基于注意力的解释3.1.3 基于示例的解释 3.2 全局解释3.2.1 基…

ElementUI el-select 组件动态设置disabled后,高度变更的问题解决办法

问题描述 Vue2 项目在使用 el-select 组件时&#xff0c;动态将disabled变更为了 true&#xff0c;元素的高度发生了变化。 问题原因 通过浏览器开发人员工具面板&#xff0c;发现&#xff0c;组件内的 input 元素被动态设置了height的样式&#xff1a; 在项目中检查后并…

Python常用的数据分析和可视化库

Python 也有很强的数据分析和可视化能力&#xff0c;拥有许多强大的框架和库。以下是一些 Python 中常用的数据分析和可视化库&#xff1a; Python 的数据分析库 Pandas&#xff1a;Pandas 是一个强大的数据分析和数据处理库&#xff0c;提供了高效的数据结构和数据分析工具。…

Flutter对接FlutterBugly 报错Zone mismatch

在Flutter对接FutterBlugy时报如下错误: Unhandled Exception: Zone mismatch. E/flutter ( 1292): The Flutter bindings were initialized in a different zone than is now being used. This will likely cause confusion and bugs