HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何使用 HTML、CSS 和 JavaScript 构建随机引语生成器?

front end technologyjavascriptweb development

在本教程中，我们将使用 HTML、CSS 和 JavaScript 构建一个项目，该项目将从 API(type.fit)生成随机引语。

步骤

我们将遵循一些基本步骤 −

  • 创建 HTML 元素和模板

  • 使用 CSS 添加样式

  • JavaScript 逻辑

创建 HTML 元素和模板

第一步是创建 HTML 元素和模板。我们首先添加一个框，其中将显示项目，然后我们将添加一个按钮，当单击该按钮时，它将在框中显示一个新的随机报价，然后使用 span 标签显示报价符号类型字体图标。

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Random quote generator using HTML, CSS and JavaScript</title>
</head>
<body>
   <div class="boxSize">
   <h1>
   <i class="fas fa-quote-left"></i>
   <span class="QuoteText" id="QuoteText"></span>
   <i class="fas fa-quote-right"></i>
   </h1>
   <p class="QuoteWR" id="author"></p>
   <hr/>
   <div class="QuoteBtn">
   <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button>
   </div>
   </div>
</body>
</html>

使用 CSS 添加样式

现在我们将为编写的 HTML 项目添加样式。我们将为框添加框阴影、填充和边距等属性，对于作者，我们将使用草书字体系列，我们还将为框和主体添加背景颜色，使其看起来很棒。

我们将处理内部 CSS，这样可以避免制作额外的文件，但为 CSS 和 JavaScript 制作外部文件被认为是一种很好的做法。

我们将在 head 中添加 CDN font awesome 链接，以便在我们的应用程序中使用 font awesome 图标。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

CSS

body{
   min-height:100vh;
   transition: 0.5s;
   display: flex;
   background-color: #A4E5E0;
   align-items: center;
   justify-content: center;

}
.boxSize {
   margin: 10px;
   border-radius: 10px;
   width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
   background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
   font-size: 35px;
   color: blue;
}
.QuoteText {
   text-align: center;
   font-size: 40px;
   font-weight: bold;
}
.author {
   margin:10px;
   text-align: right;
   font-size: 25px;
   font-style: italic;
   font-family: cursive;
}
.QuoteBtn {
   width: 100%;
   display: flex;
   margin-top:10px;
}
.GenerateQuote_next {
   font-size:18px;
   border-radius: 5px;
   cursor:pointer;
   padding: 10px;
   margin-top: 5px;
   font-weight: bold;
   color: white;
   background-color: #2C5E1A
}
.GenerateQuote_next:hover{
   background-color: black;
}

JavaScript 逻辑

现在，逻辑部分出现在场景中，该部分将是 JavaScript，只有我们将定义哪个元素将执行什么工作，并使用 API 获取和显示我们的数据，所以让我们深入了解我们的 JavaScript 函数。

步骤

我们必须遵循以下步骤来完成我们的工作 −

  • 从 type.fit API 获取报价数据。

  • 收到的数据将存储在数组中。

  • 取一个名为‘randomIdx’的随机索引变量。

  • 然后设置‘randomIdx’最大大小作为引用列表长度。

  • 使用生成的随机索引获取引用和作者

  • 现在我们将获得的值分配给项目元素。

JavaScript

var url="https://type.fit/api/quotes";
const response=await fetch(url);
const Quote_list = await response.json();
const randomIdx = Math.floor(Math.random()*Quote_list.length);
const quoteText=Quote_list[randomIdx].text;
const auth=Quote_list[randomIdx].author;
if(!auth) author = "Anonymous";
console.log (quoteText);
console.log (auth);

让我们嵌入 JavaScript 函数代码来使其工作。

示例 - 完整程序

以下是构建随机引号生成器的完整程序。

<!DOCTYPE html>
<html>
<head>
   <title>Ramdom quote generator using HTML, CSS and JavaScript</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
   <style>
      body{
         min-height:100vh;
         transition: 0.5s;
         display: flex;
         background-color: #A4E5E0;
         align-items: center;
         justify-content: center;

      }
      .boxSize {
         margin: 10px;
         border-radius: 10px;
         width: 800px;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 30px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
         background-color: rgba(255, 255, 255, 0.3);
      }
      .fa-quote-left, .fa-quote-right {
         font-size: 35px;
         color: blue;
      }
      .QuoteText {
         text-align: center;
         font-size: 40px;
         font-weight: bold;
      }
      .author {
         margin:10px;
         text-align: right;
         font-size: 25px;
         font-style: italic;
         font-family: cursive;
      }
      .QuoteBtn {
         width: 100%;
         display: flex;
         margin-top:10px;
      }
      .GenerateQuote_next {
         font-size:18px;
         border-radius: 5px;
         cursor:pointer;
         padding: 10px;
         margin-top: 5px;
         font-weight: bold;
         color: white;
         background-color: #2C5E1A
      }
      .GenerateQuote_next:hover {
         background-color: black;
      }
   </style>
</head>
<body>
   <div class="boxSize">
   <h1>
      <i class="fas fa-quote-left"></i>
      <span class="QuoteText" id="QuoteText"></span>
      <i class="fas fa-quote-right"></i>
   </h1>
   <p class="QuoteWR" id="author"></p>

   <hr/>
   <div class="QuoteBtn">
   <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button>
   </div>
   </div>
   <script>
      const GenerateQuote = async () =>{
         var url="https://type.fit/api/quotes";

         const response=await fetch(url);
         const Quote_list = await response.json();
         const randomIdx = Math.floor(Math.random()*Quote_list.length);
         const quoteText=Quote_list[randomIdx].text;
         const auth=Quote_list[randomIdx].author;
         
         if(!auth) author = "Anonymous";
         document.getElementById("QuoteText").innerHTML=quoteText;
         document.getElementById("author").innerHTML="~ "+auth;
      }
      GenerateQuote();
   </script>
</body>
</html>

因此，我们已经学习了如何制作报价生成器应用程序，希望它能有所帮助。

相关文章

打印 下一节 ❯❮ 上一节