当您听到使用原生 JavaScript 随机引用这个词时，您会想到什么？就我而言，任何情况都可能。 可能还有其他脚本语言可以制作随机引语，但其中最杰出的一种是使用 JavaScript 制作随机引语。 您可能见过一些显示人们帖子的社交媒体应用，但您必须继续滚动才能查看更多帖子。但根据我们将要构建的内容，您必须单击按钮才能查看新引言。 注意：在本教程中，我们将使用 API，该 API 用于在网络上随机获取报价。只需单击按钮，API 即可获取新报价。所以，不要浪费太多时间，让我们深入了解本指南。 先决条件 您需要具备 HTML 基础知识 你需要具备 CSS 的基本知识 你需要具备 JavaScript 的基础知识 还有代码编辑器（Sublime 或 VS code）等。 一步步编写 JavaScript 随机引文生成器 随机引语会从 API 或数组中随机提取引语。在本文中，我们将使用 JavaScript 从数组中生成引语，因为我们仅使用 HTML、CSS 和 JavaScript 从头开始设计随机引语生成器。以下是完成随机引语任务的分步指南。 您即将构建的项目包含三个页面：HTML、CSS 和 JavaScript。因此，您将命名各个页面，如下所示。index.html、style.css、script.js。完成此操作后，您就可以继续下一步了。 步骤 1：创建新项目 此步骤将使您能够添加一些 HTML 代码来构成您的项目结构。 注意：本节可能是如上所述创建文件夹和文件后要做的第一件事。 第 2 步：构建框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--META information--> <meta name="description" content="Random Quote Generator"> <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API"> <meta name="author" content="EmmyKolic"> <!--End of META information--> <title>Random Quotes</title> <!--LINK CUSTOM CSS FILE--> <link rel="stylesheet" href="style.css"> <!--FONTAWESOME CDN--> <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"> </head> <body> <!-- Quote Container --> <div class="container"> <!-- Quote to be Displayed Here --> <h1> <i class="fas fa-quote-left"></i> <span class="quote" id="quote"></span> <i class="fas fa-quote-right"></i> </h1> <!-- Author to be Displayed Here --> <p class="author" id="author"></p> <hr /> <div class="button"> <!--Button to tweet the quote --> <a class="twitter" id="tweet" href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a> <!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated--> <button class="next" onclick="getNewQuote()">Next quote</button> </div> </div> <!--LINK CUSTOM JS FILE--> <script src="script.js"></script> </body> </html> 在本节中，我们将使用 CSS 为代码添加样式，以构建引文生成器。注意：本节是创建 index.html 文件后要做的下一件事，您将创建另一个名为 style.css 的文件，style.css 文件将链接到 HTML 文件。 步骤 3：为类添加样式 然后，您可以设置 HTML 布局的样式。下面是 CSS 代码。 * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); } 在此步骤中，我们将添加一些 JavaScript 代码来构建引文生成器。注意：此部分是本教程的重要部分，现在您将创建另一个文件，将其命名为 script.js。 步骤 4：添加几行 JavaScript 代码。 仔细阅读下面的代码，你会清楚地看到做了什么，我们通过使用链接与 API 进行交互，并保存在名为 url 的变量中。为了使本指南简洁，请仔细阅读 script.js，你会注意到每个部分之前都有一条注释。以下是 JavaScript 代码。 const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet"); const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes"; // fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json(); // Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length); //Store the quote present at the randomly generated index const quote = allQuotes[indx].text; //Store the author of the respective quote const auth = allQuotes[indx].author; if (auth == null) { author = "Anonymous"; } //function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth; //tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; }; getNewQuote(); 结论 我们已经完成了本教程，希望您能从中获益匪浅。关于如何使用原生 JavaScript 构建随机引号项目。 我们已经了解了如何与 API 交互，尽管这不是唯一的方法，或者我应该说不是与 API 交互的最佳方法。以及如何将引言从我们的 JS 代码发布到您的 Twitter 帐户。 仅讨论本教程就让我们受益匪浅。所以请随意发表评论！如果您想要更多 ，请关注我。 教程 直到下一次，祝您过得愉快！ 关于作者 是一名全栈 Laravel 开发人员，在软件开发行业拥有 年以上经验。他通过融合软件开发、编写和教授他人经验，积累了全面的技能。他的堆栈包括 等。 Emmanuel Okolie 2+ ReactJs, Laravel, PHP, JavaScript, 他是一名自由职业者，为客户建立网站并编写技术手册来指导其他人如何开展工作。 非常高兴有机会与您交谈。请访问并关注他的 或他的 Emmanuel Okolie 、 LinkedIn 、 Facebook 、 Github Twitter 。 网站
