个人内容展示前端，支持动态显示

最新推荐文章于 2024-06-07 23:26:45 发布

Elik-hb

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量247

点赞数 7

分类专栏：纯前端开发文章标签：前端

本文链接：https://blog.csdn.net/qq_65099052/article/details/138940700

版权

纯前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用截图展示

在这里插入图片描述

介绍

这是一个HTML代码，用于创建一个简单的网页。该页面是一个"Credits"页面，用于显示一些内容并提供复制功能。页面的结构包括一个标题（Credits）、一系列产品（product），每个产品都包括一个标题（title）和一个内容部分（licence），以及一个复制按钮（copy-button）。用户可以点击复制按钮将内容复制到剪贴板，支持动态显示。

基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credits</title>
<style>
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f0f2f5;
  color: #333;
}

.content {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #4a90e2;
}

.product {
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 20px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product .title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product .copy-button {
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  font-size: 0.9em;
  transition: background-color 0.3s, transform 0.2s;
  margin-left: 10px;
  flex-shrink: 0;
}

.product .copy-button:hover {
  background-color: #357ab8;
  transform: scale(1.05);
}

.licence {
  background-color: #eef1f5;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
  border-left: 4px solid #4a90e2;
}

.licence h3 {
  font-size: 1em;
  font-weight: bold;
  margin-top: 0;
}

.licence pre {
  white-space: pre-wrap;
  margin: 0;
  font-size: 0.9em;
}

input + label + div {
  display: none;
}

input + label::after {
  content: "Show License";
  cursor: pointer;
  color: #4a90e2;
  text-decoration: underline;
}

input:checked + label + div {
  display: block;
}

input:checked + label::after {
  content: "Hide License";
  cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
  <div class="page-title">Credits</div>
  <div class="product">
    <div class="header">
      <span class="title">内容</span>
      <button class="copy-button" onclick="copyLicense('license-0')">Copy</button>
    </div>
    <input type="checkbox" hidden id="0">
    <label class="show" for="0" tabindex="0"></label>
    <div class="licence">
      <h3>内容:</h3>
      <pre id="license-0">
        内容
    </pre>
    </div>
  </div>
  <div class="product">
    <div class="header">
      <span class="title">内容</span>
      <button class="copy-button" onclick="copyLicense('license-1')">Copy</button>
    </div>
    <input type="checkbox" hidden id="1">
    <label class="show" for="1" tabindex="0"></label>
    <div class="licence">
      <h3>内容:</h3>
      <pre id="license-1">
        内容
     </pre>
    </div>
  </div>
  <div class="product">
    <div class="header">
      <span class="title">内容</span>
      <button class="copy-button" onclick="copyLicense('license-2')">Copy</button>
    </div>
    <input type="checkbox" hidden id="2">
    <label class="show" for="2" tabindex="0"></label>
    <div class="licence">
      <h3>内容:</h3>
      <pre id="license-2">
        内容
    </pre>
    </div>
  </div>
  <div class="product">
    <div class="header">
      <span class="title">内容</span>
      <button class="copy-button" onclick="copyLicense('license-3')">Copy</button>
    </div>
    <input type="checkbox" hidden id="3">
    <label class="show" for="3" tabindex="0"></label>
    <div class="licence">
      <h3>内容:</h3>
      <pre id="license-3">
        内容
      </pre>
    </div>
  </div>
</div>
<script>
function copyLicense(id) {
  const licenseText = document.getElementById(id).innerText;
  navigator.clipboard.writeText(licenseText).then(() => {
    alert('内容已经成功复制到剪贴板!');
  }).catch(err => {
    console.error('复制失败: ', err);
  });
}
</script>
</body>
</html>

我使用的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credits</title>
<style>
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f0f2f5;
  color: #333;
}

.content {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #4a90e2;
}

.product {
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 20px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product .title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product .copy-button {
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  font-size: 0.9em;
  transition: background-color 0.3s, transform 0.2s;
  margin-left: 10px;
  flex-shrink: 0;
}

.product .copy-button:hover {
  background-color: #357ab8;
  transform: scale(1.05);
}

.licence {
  background-color: #eef1f5;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
  border-left: 4px solid #4a90e2;
}

.licence h3 {
  font-size: 1em;
  font-weight: bold;
  margin-top: 0;
}

.licence pre {
  white-space: pre-wrap;
  margin: 0;
  font-size: 0.9em;
}

input + label + div {
  display: none;
}

input + label::after {
  content: "Show License";
  cursor: pointer;
  color: #4a90e2;
  text-decoration: underline;
}

input:checked + label + div {
  display: block;
}

input:checked + label::after {
  content: "Hide License";
  cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
  <div class="page-title">Credits</div>
  <div class="product">
    <div class="header">
      <span class="title">kafka介绍</span>
      <button class="copy-button" onclick="copyLicense('license-0')">Copy</button>
    </div>
    <input type="checkbox" hidden id="0">
    <label class="show" for="0" tabindex="0"></label>
    <div class="licence">
      <h3>kafka介绍:</h3>
      <pre id="license-0">
        Kafka是由Apache软件基金会开发的一个开源流处理平台，它由Scala和Java编写，是一个高吞吐量的分布式发布订阅消息系统。以下是关于Kafka的详细介绍：

        一、主要特性
        
        高吞吐量、低延迟：Kafka每秒可以处理几十万条消息，延迟最低只有几毫秒。其高吞吐量得益于其独特的设计，使得它能够处理大量的数据流。
        可扩展性：Kafka集群支持热扩展，无需停机即可增加或减少节点。
        持久性、可靠性：消息被持久化到本地磁盘，并且支持数据备份防止数据丢失，保证了数据的可靠性和一致性。
        容错性：Kafka允许集群中节点失败，若副本数量为n，则允许n-1个节点失败，具有很高的容错性。
        高并发：支持数千个客户端同时读写，满足了高并发场景的需求。
        二、Kafka的应用场景
        
        消息队列：Kafka可以替代传统的消息队列，如RabbitMQ、ActiveMQ等，用于异步处理、应用解耦、流量削峰等场景。
        网站活性跟踪：Kafka可以将网页/用户操作等信息发送到Kafka中，并实时监控，或者离线统计分析用户行为等。
        实时日志收集与分析：Kafka可以用于收集各种应用程序生成的日志数据，并将其发送到不同的消费者（如ELK Stack、Splunk或自定义分析应用程序）以进行实时分析和监控。
        数据集成：Kafka可以用于将数据从一个应用程序或数据存储传输到另一个应用程序或数据存储，实现数据的实时同步和共享。
        监控和警报：通过将性能指标、日志和事件数据发送到Kafka主题，可以轻松地构建监控和警报系统，实现系统的实时监控和预警。
        三、Kafka的架构
        
        Kafka的整体架构包括若干Producer（生产者）、Broker（代理服务器）、Consumer Group（消费者组）以及一个Zookeeper集群。其中，Producer负责将消息发布到Broker；Broker负责存储和管理消息；Consumer Group负责从Broker订阅并消费消息；而Zookeeper则负责管理集群配置、选举Leader以及在Consumer Group发生变化时进行负载均衡。
      </pre>
    </div>
  </div>
  <div class="product">
    <div class="header">
      <span class="title">Spark介绍</span>
      <button class="copy-button" onclick="copyLicense('license-1')">Copy</button>
    </div>
    <input type="checkbox" hidden id="1">
    <label class="show" for="1" tabindex="0"></label>
    <div class="licence">
      <h3>Spark介绍:</h3>
      <pre id="license-1">
    
        Spark是一个开源的大数据处理框架，它基于内存计算，具有高效、快速、通用性强和容错性高等特点。Spark最初由加州大学伯克利分校的AMP实验室开发，现在已成为Apache软件基金会的一个顶级项目。
        
        一、核心特性
        
        高效性：Spark利用内存进行数据处理，比传统的基于磁盘的数据处理框架（如Hadoop）要快得多。这种基于内存的计算模式使得Spark能够处理大规模数据集，并在较短的时间内得到结果。
        快速性：Spark通过DAG（Directed Acyclic Graph）执行引擎实现了任务的快速调度和执行。它可以将一个复杂的作业划分为多个阶段（Stage），每个阶段包含多个任务（Task），然后并行地执行这些任务，从而提高了处理速度。
        通用性：Spark支持多种数据处理模式，包括批处理、流处理、交互式查询和机器学习等。这使得Spark可以应用于各种大数据场景，满足不同的数据处理需求。
        容错性：Spark采用了RDD（Resilient Distributed Datasets）模型来实现数据的容错性。RDD是一种抽象的数据结构，可以看作是一个分布式的数据集合。在Spark中，所有的数据都是以RDD的形式进行存储和处理的。如果某个节点出现故障，Spark可以自动从其他节点恢复数据，保证作业的顺利进行。
        二、生态系统
        
        Spark生态系统非常丰富，包括多个组件，如Spark Core、Spark SQL、Spark Streaming、MLlib和GraphX等。这些组件分别处理不同的数据处理任务，如内存计算框架、实时处理应用、即席查询、机器学习和图处理等。它们可以无缝地集成在一起，提供一站式的大数据解决方案。
        
        Spark Core：Spark Core是Spark的基础组件，提供了内存计算框架和基本的编程接口。它支持Scala、Java、Python和R等多种编程语言，并提供了丰富的API和工具，方便用户进行数据处理和分析。
        Spark SQL：Spark SQL是Spark的一个子项目，用于处理结构化数据。它支持SQL查询，并可以与多种数据源（如Hive、JDBC等）进行交互。通过Spark SQL，用户可以轻松地处理和分析大规模的结构化数据集。
        Spark Streaming：Spark Streaming是Spark的一个子项目，用于处理实时数据流。它可以将数据流划分为多个小批次（Micro-batches），然后并行地处理这些批次。这使得Spark Streaming能够处理大规模的实时数据流，并支持多种数据源（如Kafka、Flume等）。
        MLlib：MLlib是Spark的一个机器学习库，提供了大量的机器学习算法和工具。通过MLlib，用户可以轻松地构建和训练机器学习模型，并将其应用于各种场景中。
        GraphX：GraphX是Spark的一个图处理库，用于处理和分析图数据。它支持多种图算法和数据结构，并提供了丰富的API和工具，方便用户进行图数据的处理和分析。
        三、应用场景
        
        Spark的应用场景非常广泛，包括但不限于以下几个方面：
        
        数据处理与转换：Spark可以用于处理和转换大量数据，如清洗、过滤、聚合和转换数据等。这些操作可以用于预处理数据，以便进一步进行分析、建模或可视化。
        ETL（抽取、转换、加载）：Spark可以用于构建ETL管道，从多种数据源（如数据库、文件系统、API等）抽取数据，对数据进行转换和处理，然后将结果加载到目标系统（如数据仓库、数据库等）。
        实时数据流处理：使用Spark Streaming，可以处理实时数据流，如从Kafka、Flume等数据源接收数据，对数据进行实时处理和分析，然后将结果存储到数据库或其他系统中。这种实时处理可以用于实时监控、实时推荐等场景。
        机器学习：通过MLlib库，可以构建和训练机器学习模型，并将其应用于预测、分类、聚类等任务中。这些模型可以应用于各种场景中，如推荐系统、金融风控等。
        图计算：使用GraphX库，可以处理和分析图数据，如社交网络、物联网设备连接等。这些图数据可以揭示出许多有趣的信息和模式，如社交网络中的社区结构、物联网设备之间的连接关系等。
      </pre>
    </div>
  </div>
  <div class="product">
    <div class="header">
      <span class="title">hadoop介绍</span>
      <button class="copy-button" onclick="copyLicense('license-2')">Copy</button>
    </div>
    <input type="checkbox" hidden id="2">
    <label class="show" for="2" tabindex="0"></label>
    <div class="licence">
      <h3>hadoop介绍:</h3>
      <pre id="license-2">

        Hadoop是一个开源的分布式计算平台，由Apache Software Foundation维护。它能够在大量的普通硬件设备上运行，处理海量数据集，非常适合大数据的存储和分析。Hadoop的核心包括以下几个关键组件：

        Hadoop分布式文件系统（HDFS）：这是一个高吞吐量的分布式文件系统，用于存储大数据。HDFS将数据分布在多个节点上，确保数据的可靠性和高效访问。它通过将数据复制到多个节点来提供容错能力，即使部分硬件发生故障，整个系统也能继续运行。
        Hadoop YARN：这是Hadoop的资源管理平台，负责管理计算资源，并支持多种数据处理引擎，如MapReduce、Spark等。YARN允许用户在Hadoop集群上运行各种分布式应用程序。
        Hadoop MapReduce：这是一个编程模型，用于大规模数据集的并行处理。MapReduce将复杂的计算任务分解成许多简单的任务，在多个节点上并行执行，然后将结果汇总，以完成整个计算任务。
        Hadoop的优势在于其高可靠性、高扩展性和成本效益。它能够在成百上千的节点上运行，处理PB级别的数据。此外，Hadoop生态系统还包括了其他工具和框架，如Hive（提供数据仓库功能）、Pig（提供高级编程语言进行数据分析）、HBase（分布式列式存储数据库）等，这些工具和框架扩展了Hadoop的功能，使其能够处理更加复杂的数据分析任务。
        
        Hadoop广泛应用于互联网公司、金融机构、科研机构等领域，是处理和分析大数据的重要工具之一。随着技术的发展，Hadoop也在不断地优化和升级，以适应日益增长的大数据处理需求。
      </pre>
    </div>
  </div>
  <div class="product">
    <div class="header">
      <span class="title">Flink介绍</span>
      <button class="copy-button" onclick="copyLicense('license-3')">Copy</button>
    </div>
    <input type="checkbox" hidden id="3">
    <label class="show" for="3" tabindex="0"></label>
    <div class="licence">
      <h3>Flink介绍:</h3>
      <pre id="license-3">
        Flink是一个开源的流处理和批处理框架，由Apache软件基金会进行开发和维护。Flink以其低延迟、高吞吐、容错性强等特点，在大规模实时数据处理和分析领域占据重要地位。
        
        一、核心特性
        
        批流一体：Flink从另一个视角看待流处理和批处理，将二者统一起来。流处理在Flink中被视为一种无界数据流的计算方式，而批处理则被看作是特殊的流处理，即其输入数据流被定义为有界。
        Exactly-Once：Flink通过实现两阶段提交和状态保存来确保端到端的精确一致性语义，即确保每个数据项仅被处理一次。
        状态管理：Flink支持有状态的计算，能够存储中间状态以避免数据丢失和方便状态恢复。这种能力使得Flink能够处理复杂的流计算任务。
        高容错性：Flink具有轻量级的容错机制，能够在故障发生时快速恢复，并保持高吞吐率和仅一次的一致性保证。
        低延迟和高吞吐：Flink以内存速度进行计算，能够处理大规模数据流并保持低延迟和高吞吐。
        二、应用场景
        
        Flink适用于各种需要实时数据处理和分析的场景，包括但不限于：
        
        实时数据分析：Flink可以处理实时流数据，并进行实时计算和分析。例如，实时监控、实时报警、实时指标计算等。
        实时数据仓库和ETL：Flink可以构建实时数据仓库，支持ETL过程，将数据从源系统抽取、转换并加载到目标系统中。
        事件驱动型场景：如告警、监控等，Flink可以实时处理事件并触发相应的动作。
        机器学习和人工智能：随着Flink对机器学习的支持越来越完善，它也可以被用于机器学习和人工智能领域的数据处理和计算。
        三、架构组件
        
        Flink的架构主要由以下组件组成：
        
        JobManager：负责协调分布式任务的执行，包括任务的调度、状态管理、故障恢复等。
        TaskManager：是Flink的工作进程，负责执行具体的计算任务，并与JobManager进行通信。
        Dispatcher：负责接收客户端提交的作业，并将其分配给JobManager进行处理。
        ResourceManager：负责集群资源的分配和管理，确保任务能够在足够的资源上运行。
        总的来说，Flink是一个功能强大、灵活可扩展的流处理和批处理框架，适用于各种需要实时数据处理和分析的场景。
      </pre>
    </div>
  </div>
</div>
<script>
function copyLicense(id) {
  const licenseText = document.getElementById(id).innerText;
  navigator.clipboard.writeText(licenseText).then(() => {
    alert('内容已经成功复制到剪贴板!');
  }).catch(err => {
    console.error('复制失败: ', err);
  });
}
</script>
</body>
</html>

Elik-hb

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
个人内容展示前端，支持动态显示

这是一个HTML代码，用于创建一个简单的网页。该页面是一个"Credits"页面，用于显示一些内容并提供复制功能。页面的结构包括一个标题（Credits）、一系列产品（product），每个产品都包括一个标题（title）和一个内容部分（licence），以及一个复制按钮（copy-button）。用户可以点击复制按钮将内容复制到剪贴板，支持动态显示。
复制链接

扫一扫