首页 > 编程语言> > 使用 HTML、CSS 和 JavaScript 创建随机引号生成器

使用 HTML、CSS 和 JavaScript 创建随机引号生成器

2023-07-08 13:59:49 作者：互联网

## HTML 结构：
让我们从检查报价生成器的 HTML 结构开始。我们有一个基本的 HTML 文件，其中包含一个带有标题、引号文本元素和按钮的容器 div。这是 HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and CSS link -->
  </head>
  <body>
    <div class="container">
      <div class="title">Quote Generator</div>
      <div class="quote_text">"In the middle of difficulty lies opportunity. - Albert Einstein"</div>
      <button onclick="generateQuote()" class="gnBtn">Generate <span id="cog">⚙</span></button>
    </div>

    <!-- JavaScript file -->
    <script src="app.js"></script>
  </body>
</html>

## CSS 样式：
为了使我们的报价生成器在视觉上具有吸引力，我们应用 CSS 样式。我们导入谷歌字体库以使用“Poppins”字体。我们使用CSS自定义属性定义一些颜色变量，稍后我们将在样式中使用。这是 CSS 代码：

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
/* Colors that will be used in the making of this website */
:root {
  --bg-color: #111314;
  --box-color: #1a1f22;
  --title-color: #a6a7ff;
  --gnBtnColor: #262d31;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins";
}

body {
  background-color: var(--bg-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
}

.container {
  background: var(--box-color);
  padding: 20px;
  border-radius: 10px;
  text-align: center;

  width: 500px;
}

.container .title {
  font-weight: 700;
  color: var(--title-color);
  font-size: 2.2rem;
}

.quote_text {
  font-size: 1.8rem;
  font-weight: 500;
  margin-top: 20px;
  color: #dadada;
}

.gnBtn {
  width: 80%;
  height: 50px;
  margin-top: 25px;

  background-color: var(--gnBtnColor);
  cursor: pointer;

  outline: none;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
}

#cog {
  color: var(--gnBtnColor);
}

## JavaScript 功能：
为了使我们的报价生成器动态化，我们使用 JavaScript。我们定义一个名为引号的数组，它将各种引号存储为字符串。然后，我们创建一个名为 generateQuote（）的函数，它从数组中随机选择一个报价并更新网页上的报价文本。下面是 JavaScript 代码：

var quotes = [
  "The only way to do great work is to love what you do. - Steve Jobs",
  "In the middle of difficulty lies opportunity. - Albert Einstein",
  "Believe you can and you're halfway there. - Theodore Roosevelt",
  "Success is not final, failure is not fatal: It is the courage to continue that counts. - Winston Churchill",
  "The future belongs to those who believe in the beauty of their dreams. - Eleanor Roosevelt",
  "The best way to predict the future is to create it. - Peter Drucker",
];

let quoteText = document.querySelector(".quote_text");

function generateQuote() {
  var randomIndex = Math.floor(Math.random() * quotes.length);
  var quote = quotes[randomIndex]
  quoteText.innerHTML = '"' + quote + '"'
}

结论：
通过结合HTML，CSS和JavaScript，我们创建了一个随机引用生成器。HTML 结构为网页提供了基础，而 CSS 样式增强了其视觉外观。JavaScript 通过生成随机引号并相应地更新引号文本来增加交互性。随意修改代码并添加更多报价以自定义您自己的报价生成器。

标签：HTML,CSS,JavaScript
来源：