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

2023-07-08 13:59:49 阅读：176 来源： 互联网

## 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
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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