720 讀數

这段 JavaScript 代码可生成随机引号

经过 Emmanuel Okolie 6m2024/04/25

太長; 讀書

如何使用原始 JavaScript 构建随机引用项目。

featured image - 这段 JavaScript 代码可生成随机引号

当您听到使用原生 JavaScript 随机引用这个词时，您会想到什么？就我而言，任何情况都可能。

可能还有其他脚本语言可以制作随机引语，但其中最杰出的一种是使用 JavaScript 制作随机引语。

您可能见过一些显示人们帖子的社交媒体应用，但您必须继续滚动才能查看更多帖子。但根据我们将要构建的内容，您必须单击按钮才能查看新引言。

注意：在本教程中，我们将使用 API，该 API 用于在网络上随机获取报价。只需单击按钮，API 即可获取新报价。所以，不要浪费太多时间，让我们深入了解本指南。

先决条件

您需要具备 HTML 基础知识
你需要具备 CSS 的基本知识
你需要具备 JavaScript 的基础知识
还有代码编辑器（Sublime 或 VS code）等。

一步步编写 JavaScript 随机引文生成器

随机引语会从 API 或数组中随机提取引语。在本文中，我们将使用 JavaScript 从数组中生成引语，因为我们仅使用 HTML、CSS 和 JavaScript 从头开始设计随机引语生成器。以下是完成随机引语任务的分步指南。

步骤 1：创建新项目您即将构建的项目包含三个页面：HTML、CSS 和 JavaScript。因此，您将命名各个页面，如下所示。index.html、style.css、script.js。完成此操作后，您就可以继续下一步了。

第 2 步：构建框架此步骤将使您能够添加一些 HTML 代码来构成您的项目结构。
注意：本节可能是如上所述创建文件夹和文件后要做的第一件事。

 <!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>

步骤 3：为类添加样式在本节中，我们将使用 CSS 为代码添加样式，以构建引文生成器。注意：本节是创建 index.html 文件后要做的下一件事，您将创建另一个名为 style.css 的文件，style.css 文件将链接到 HTML 文件。

然后，您可以设置 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); }

步骤 4：添加几行 JavaScript 代码。在此步骤中，我们将添加一些 JavaScript 代码来构建引文生成器。注意：此部分是本教程的重要部分，现在您将创建另一个文件，将其命名为 script.js。

仔细阅读下面的代码，你会清楚地看到做了什么，我们通过使用链接与 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();