paint-brush
这段 JavaScript 代码可生成随机引号经过@emmykolic1
413 讀數
413 讀數

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

经过 Emmanuel Okolie 6m2024/04/25
Read on Terminal Reader

太長; 讀書

如何使用原始 JavaScript 构建随机引用项目。
featured image - 这段 JavaScript 代码可生成随机引号
Emmanuel Okolie  HackerNoon profile picture
0-item
1-item

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


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


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


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

先决条件

  1. 您需要具备 HTML 基础知识
  2. 你需要具备 CSS 的基本知识
  3. 你需要具备 JavaScript 的基础知识
  4. 还有代码编辑器(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();

结论

我们已经完成了本教程,希望您能从中获益匪浅。关于如何使用原生 JavaScript 构建随机引号项目。


我们已经了解了如何与 API 交互,尽管这不是唯一的方法,或者我应该说不是与 API 交互的最佳方法。以及如何将引言从我们的 JS 代码发布到您的 Twitter 帐户。


仅讨论本教程就让我们受益匪浅。所以请随意发表评论!如果您想要更多教程,请关注我。

直到下一次,祝您过得愉快!

关于作者

Emmanuel Okolie是一名全栈 Laravel 开发人员,在软件开发行业拥有2+年以上经验。他通过融合软件开发、编写和教授他人经验,积累了全面的技能。他的堆栈包括ReactJs, Laravel, PHP, JavaScript,等。


他是一名自由职业者,为客户建立网站并编写技术手册来指导其他人如何开展工作。


Emmanuel Okolie非常高兴有机会与您交谈。请访问并关注他的LinkedIn Facebook Github Twitter或他的网站