社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
步骤
创建 HTML 元素和模板
HTML
使用 CSS 添加样式
CSS
JavaScript 逻辑
JavaScript
示例 - 完整程序
首页 web前端 js教程 如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

Aug 24, 2023 pm 08:41 PM

如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

在本教程中，我们将使用 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制作外部文件被认为是一个很好的做法。

我们将在我们的头脑中添加CDN字体很棒的链接为了在我们的应用程序中使用 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>
   &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css&quot; integrity=&quot;sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==&quot; crossorigin=&quot;anonymous&quot; /&gt;
   <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>
登录后复制

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

以上是如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热门文章

击败分裂小说需要多长时间？
3 周前 By DDD
仓库：如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？
3 周前 By 王林
显示更多

热门工具标签

代码&IT
音频
商业
营销
AI检测器
聊天机器人
设计与艺术

热门文章

击败分裂小说需要多长时间？
3 周前 By DDD
仓库：如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？
3 周前 By 王林
显示更多

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7140
9
Java教程
1534
14
Laravel 教程
1257
25
PHP教程
1205
29
CakePHP 教程
1155
46
显示更多
Related knowledge
在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替换字符串字符

jQuery获取元素填充/保证金 jQuery获取元素填充/保证金 Mar 01, 2025 am 08:53 AM

jQuery获取元素填充/保证金

jQuery检查日期是否有效 jQuery检查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery检查日期是否有效

10个jQuery手风琴选项卡 10个jQuery手风琴选项卡 Mar 01, 2025 am 01:34 AM

10个jQuery手风琴选项卡

10值得检查jQuery插件 10值得检查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得检查jQuery插件

HTTP与节点和HTTP-Console调试 HTTP与节点和HTTP-Console调试 Mar 01, 2025 am 01:37 AM

HTTP与节点和HTTP-Console调试

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

自定义Google搜索API设置教程

jQuery添加卷轴到Div jQuery添加卷轴到Div Mar 01, 2025 am 01:30 AM

jQuery添加卷轴到Div

See all articles