使用 HTML、CSS 和 JavaScript 的随机报价生成器(1)

📌 相关文章

📜 使用 HTML、CSS 和 JavaScript 的随机报价生成器(1)

📅 最后修改于: 2023-12-03 15:22:12.192000 🧑 作者: Mango

使用 HTML、CSS 和 JavaScript 的随机报价生成器

随机报价生成器是一种很有意思的项目，它可以生成各种不同类型的报价，不仅可以作为个人开发项目或练习使用，也可以用于商业用途。本文将会介绍如何使用 HTML、CSS 和 JavaScript 来制作一个随机报价生成器，文中会提供详细的操作步骤和代码示例。

前置知识

在继续阅读本文之前，请确保您已经掌握以下技能：

HTML 基础知识
CSS 基础知识
JavaScript 基础知识

思路

在进行这个项目之前，我们需要先明确这个项目的实现思路。

创建一个包含报价文字的数据结构
使用 JavaScript 随机生成一个报价
在 HTML 中展示生成的报价
在 CSS 中美化样式

创建数据结构

首先，我们需要创建一个包含报价文字的数组作为数据结构。

const quotes = [
  "Stay hungry, stay foolish. — Steve Jobs",
  "Good artists copy, great artists steal. — Pablo Picasso",
  "Argue with idiots, and you become an idiot. — Paul Graham",
  "Be yourself; everyone else is already taken. — Oscar Wilde",
  "Simplicity is the ultimate sophistication. — Leonardo da Vinci",
  "Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do. — Mark Twain",
  "It does not matter how slowly you go as long as you do not stop. — Confucius",
  "It is never too late to be what you might have been. — George Eliot",
  "If you cannot do great things, do small things in a great way. — Napoleon Hill",
  "Life is like riding a bicycle. To keep your balance, you must keep moving. — Albert Einstein"
];

随机生成报价

接下来，我们需要使用 JavaScript 来随机选择一个报价。

const quote = quotes[Math.floor(Math.random() * quotes.length)];

本代码将会从 quotes 中随机选择一个报价，然后使用 Math.floor() 函数对随机位置取整，以保证它是一个整数。

在 HTML 中展示生成的报价

现在我们已经有了一个随机选择的报价，下一步就是将其展示在网页上。

<blockquote>
  <p id="quote"></p>
</blockquote>

本代码为 HTML 中的元素，展示报价。我们可以将它放在 body 标签中，如下所示：

<body>
  <div class="container">
    <h1>随机报价生成器</h1>
    <blockquote>
      <p id="quote"></p>
    </blockquote>
    <button class="btn" id="generate">生成报价</button>
  </div>
</body>

绑定事件

接下来，我们需要给“生成报价”按钮绑定一个事件。点击该按钮后，我们需要将生成的报价展示在网页上。

const generateBtn = document.getElementById("generate");
const quoteElement = document.getElementById("quote");

generateBtn.addEventListener("click", function() {
  quoteElement.innerText = quote;
});

本代码使用 getElementById() 函数获取了生成报价按钮和报价元素，然后使用 addEventListener() 函数将“生成报价”按钮与一个事件（匿名函数）绑定。该事件会在按钮被点击时触发，触发后它会更改报价元素的 innerText 属性为随机生成的报价。

美化样式

最后一步是美化样式。我们可以使用 CSS 来让我们的随机报价生成器看起来更美观。

body {
  background-color: #f4f4f4;
  font-family: 'Arial', sans-serif;
  margin: 0;
}

.container {
  background-color: #fff;
  border-radius: 5px;
  margin: 5% auto;
  max-width: 800px;
  padding: 2em;
  text-align: center;
}

h1 {
  color: #333;
  margin-bottom: 0.75em;
}

blockquote {
  font-style: italic;
  margin-bottom: 1em;
}

.btn {
  background-color: #008CBA;
  border-color: #008CBA;
  color: #fff;
  cursor: pointer;
  font-size: 1em;
  margin-top: 1em;
  padding: 0.75em 1.25em;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #fff;
  border-color: #008CBA;
  color: #008CBA;
}

完整代码片段

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>随机报价生成器</title>
    <style>
      body {
        background-color: #f4f4f4;
        font-family: "Arial", sans-serif;
        margin: 0;
      }

      .container {
        background-color: #fff;
        border-radius: 5px;
        margin: 5% auto;
        max-width: 800px;
        padding: 2em;
        text-align: center;
      }

      h1 {
        color: #333;
        margin-bottom: 0.75em;
      }

      blockquote {
        font-style: italic;
        margin-bottom: 1em;
      }

      .btn {
        background-color: #008CBA;
        border-color: #008CBA;
        color: #fff;
        cursor: pointer;
        font-size: 1em;
        margin-top: 1em;
        padding: 0.75em 1.25em;
        transition: all 0.3s ease;
      }

      .btn:hover {
        background-color: #fff;
        border-color: #008CBA;
        color: #008CBA;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>随机报价生成器</h1>
      <blockquote>
        <p id="quote"></p>
      </blockquote>
      <button class="btn" id="generate">生成报价</button>
    </div>

    <script>
      const quotes = [
        "Stay hungry, stay foolish. — Steve Jobs",
        "Good artists copy, great artists steal. — Pablo Picasso",
        "Argue with idiots, and you become an idiot. — Paul Graham",
        "Be yourself; everyone else is already taken. — Oscar Wilde",
        "Simplicity is the ultimate sophistication. — Leonardo da Vinci",
        "Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do. — Mark Twain",
        "It does not matter how slowly you go as long as you do not stop. — Confucius",
        "It is never too late to be what you might have been. — George Eliot",
        "If you cannot do great things, do small things in a great way. — Napoleon Hill",
        "Life is like riding a bicycle. To keep your balance, you must keep moving. — Albert Einstein"
      ];

      const generateBtn = document.getElementById("generate");
      const quoteElement = document.getElementById("quote");

      generateBtn.addEventListener("click", function() {
        const quote = quotes[Math.floor(Math.random() * quotes.length)];
        quoteElement.innerText = quote;
      });
    </script>
  </body>
</html>

总结

恭喜您已经成功地创建了一个随机报价生成器！本代码示例深入浅出的介绍了如何在前端使用 HTML、CSS 和 JavaScript 来实现随机报价生成器，希望能够帮助您更好地理解前端的工作原理，提高编程能力。