如何在Javascript中生成随机笑话

DebugUsery
298 阅读5分钟

脚本中的随机笑话生成器

应用程序编程接口（API）使人们能够从其他网站获取材料，并在你希望的任何地方显示。

本教程将教你如何利用API链接设计一个javaScript笑话生成器，这是一个非常适合初学者学习JavaScript的项目。

前提条件

要学习本教程，读者应具备以下条件。

  • HTML、CSS和JavaScript方面的基本专业知识。
  • 一个代码编辑器，最好是[Visual Code Studio]。

学习目标

在本教程结束时，学习者应该能够。

  • 设计一个基本的HTML 容器以包含内容。
  • 连接API链接，从其他网页上获取数据。
  • 用eventListeners 在javaScript ，为HTML 按钮分配动作。
  • 开发一个完整的功能性随机笑话发生器。

随机笑话enerator项目实例

这个项目将使用API链接生成随机笑话。

首先，我们将在网页上做一个方框，并添加一个标题。然后我们将创建一个区域，在这个区域中可以看到所有的笑话生成器。

在这个区域下面将有一个生成按钮，每次点击它都会生成一个不同的笑话。

我们将不手动使用任何文本。在这里，我们将使用一个API链接，在fetch方法的帮助下从其他地方收集所有的信息，然后在textContent的帮助下在网页上显示。

创建以下文件。

  • index.html
  • style.css
  • app.js

这就是文件结构。

Output file arrangement

第1步：笑话发生器的基本结构

我们将首先设置笑话发生器的基本结构。550px 我们的基本框的background-color ，它的宽度将是#0C0C0C 。我们将使用边界半径为5px ，使盒子的边缘变圆。请参考下面的片段。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Joke Generator</title>
  </head>
  <body>
    <!-- box -->
    <div class="box"></div>
  </body>
</html>

通过将其position 设置为absolute ，盒子将位于我们页面的顶部中心位置，在我们页面的left ，我们将有50% 以及top ，最后，我们将transform 和translate 我们的盒子从顶部和左侧作为-50% 。

.box {
  width: 550px;
  padding: 40px 50px;
  background-color: #0c0c0c;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}

盒子的外观应该类似于下面的图片。

Output box

第2步：添加标题

下一步是添加一个标题。

标题的存在是为了增强页面的外观。标题将被置于中心位置，以保持其在方框中的位置，字体大小为24px 。请看下面的例子。

span {
  display: block;
  text-align: center;
  font-size: 24px;
  letter-spacing: 1.5px;
  font-weight: 400;
}

添加标题后，我们应该有一个接近于此的东西。

Output title

第3步：设置笑话浏览区

接下来是第三个任务，我们将创建一个区域来加载我们所有的笑话。这将通过使用<p> 标签来实现。

不需要特定的高度，其大小将根据其中内容的大小自动确定。它将有opacity 设置为0 ，以便在视觉上隐藏这部分的所有内容。

<div id="joke-section"></div>

p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  word-wrap: break-word;
  line-height: 35px;
  margin: 30px 0;
  opacity: 0;
}

使用.content-fade ，我们将把opacity 设置为1 ，这实质上意味着当类.content-fade 有效时，我们应该能够查看我们的内容。

.content-fade {
  opacity: 1;
  transition: opacity 0.1s;
}

到目前为止，我们应该有以下内容，如下图所示。

Output joke container

第4步：设置生成笑话的按钮

这个按钮将帮助我们在点击时生成随机笑话。我们将使用下面的代码片断来设计这个按钮。

<input type="submit" id="btn" value="Generate Jokes" />

#btn {
  display: block;
  background-color: #0354ab;
  border: none;
  padding: 5px;
  font-size: 17px;
  color: #ececec;
  padding: 12px 25px;
  margin: 0 auto;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

下面是添加按钮后的输出。

Output button

第5步：激活按钮

由于我们有了所需的布局，现在是在javaScript的帮助下实现这个例子的时候了。首先，我们必须获得笑话容器，然后生成笑话按钮，如下图所示。

// get the joke section container
let jokeSection = document.querySelector("#joke-section");
// get the generate joke button
let generateBtn = document.querySelector("#btn");

接下来我们要做的是在我们的项目中包含一个API，以便从其他网站获取内容。请参考下面的代码片段。

let API =
  "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";

接下来，我们将编码一个方法并将其命名为acquireJoke 。这个方法将是理想的，因为它将帮助我们实现以下目标。

  • 首先，我们将消除类.content-fade ，确保在classList.remove 的帮助下，没有任何东西可以被查看。
  • 使用fetch方法从API获得的数据将被安排在textContent 的帮助下显示。
  • 我们将使用段落标签创建一个显示，并使用classList ，添加类.content-fade 。结果，我们的文本将在显示中被看到。
// method
function acquireJoke() {
  // remove content-fade class
  jokeSection.classList.remove("content-fade");
  // fetch joke from the API
  fetch(api)
    .then((info) => info.json())
    .then((item) => {
      jokeSection.textContent = `${item.joke}`;
      // add the content-fade class
      jokeSection.classList.add("content-fade");
    });
}

最后一部分是指定我们刚刚创建的方法，每当我们的按钮被点击时显示一个笑话。该脚本将包含以下代码。

generateBtn.addEventListener("click", acquireJoke);

Output joke

总结

我们已经涵盖了使用API链接将另一个网站的材料带到你的网站，并在javaScript中开发一个随机笑话发生器。

avatar
文章
阅读
粉丝