当您听到使用原生 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 name="description" content="Random Quote Generator"> <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API"> <meta name="author" content="EmmyKolic">  <title>Random Quotes</title>  <link rel="stylesheet" href="style.css">  <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>  <div class="container">  <h1> <i class="fas fa-quote-left"></i> <span class="quote" id="quote"></span> <i class="fas fa-quote-right"></i> </h1>  <p class="author" id="author"></p> <hr /> <div class="button">  <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>  <button class="next" onclick="getNewQuote()">Next quote</button> </div> </div>  <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 。 网站

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

架构师指南：构建 AI/ML 数据湖参考架构

Telegram：加密岛通往大陆的桥梁

加密货币增长：创建有效的用户角色

扬帆起航：利用数据湖开发生产级 RAG 应用程序

架构师指南：构建 AI/ML 数据湖参考架构

Telegram：加密岛通往大陆的桥梁

加密货币增长：创建有效的用户角色

扬帆起航：利用数据湖开发生产级 RAG 应用程序

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps