本教程将指导您构建实用的随机报价生成器应用程序，非常适合学习编码基础知识。 我们将用详细的代码示例来介绍每个步骤，使初学者可以轻松遵循。
项目概况
此应用程序从公共 API 检索随机报价，显示它们，并允许用户复制或共享它们。 我们来分解一下流程，探究一下代码逻辑。
第 1 步：HTML 结构
我们首先创建 HTML 布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quotes Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<!-- Content will be added here -->
</div>
<script src="index.js"></script>
</body>
</html>
这设置了基本结构，包括显示报价的元素、新报价的按钮以及用于复制和共享的图标。
第 2 步：使用代理处理 CORS
为了访问外部API，我们需要一个CORS（跨源资源共享）解决方案。 一个简单的 Express.js 代理服务器可以处理这个问题：
// proxy.js
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();
app.use(cors());
app.get("/api/quote", async (req, res) => {
try {
const response = await fetch("https://qapi.vercel.app/api/random");
const data = await response.json();
res.json(data);
} catch (error) {
res.status(500).json({ error: "API fetch failed" });
}
});
const PORT = 4000;
app.listen(PORT, () => console.log(`Proxy running on http://localhost:${PORT}`));
此本地代理获取报价并避免 CORS 问题。
第 3 步：使用 JavaScript 获取报价
“新报价”按钮会触发报价获取：
// index.js
const quoteDisplay = document.getElementById("quote");
const authorDisplay = document.getElementById("author");
async function getQuote() {
try {
const response = await fetch('http://localhost:4000/api/quote');
const data = await response.json();
quoteDisplay.textContent = data.quote || "No quote found.";
authorDisplay.textContent = data.author || "Unknown";
} catch (error) {
console.error("Quote fetch error:", error);
quoteDisplay.textContent = "Error fetching quote.";
}
}
此脚本获取数据，更新 UI 中的引用和作者。
第 4 步：复制功能
剪贴板 API 支持复制报价：
// copyQuote.js
async function copyQuote() {
try {
const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
await navigator.clipboard.writeText(quoteText);
alert("Copied to clipboard!");
} catch (error) {
console.error("Copy failed:", error);
}
}
单击复制图标可复制引用和作者。
第 5 步：共享功能
Navigator API 促进共享：
// shareQuote.js
async function shareQuote() {
const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
try {
await navigator.share({ text: quoteText });
} catch (error) {
console.error("Share failed:", error);
// Fallback for unsupported browsers
alert(`Share this quote: ${quoteText}`);
}
}
这处理共享，为缺少navigator.share的浏览器提供后备。
第 6 步：使用 CSS 设计样式
CSS 样式应用程序以提高视觉吸引力和响应能力（为简洁起见，省略了示例样式）。
第 7 步：启动应用程序
- 克隆存储库：（替换为您的实际存储库 URL）
-
安装依赖项：
npm install -
启动代理服务器：
node proxy.js - 在浏览器中打开
index.html。
项目结构
-
index.html：主界面 -
proxy.js：CORS 代理服务器 -
index.js：报价获取并显示 -
copyQuote.js：复制功能 -
shareQuote.js：共享功能 -
styles.css：造型
API 积分
由 Quotes API 提供的报价。
结论
本教程涵盖了构建随机报价生成器、演示 API 集成、CORS 处理和浏览器 API。 对于学习 API 交互、JavaScript 基础知识和浏览器 API 来说，这是一个很好的练习。 欢迎反馈！
GitHub |领英 | X
以上是构建随机报价生成器：带有代码的分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！
什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。
我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架
CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3 Linux新版
SublimeText3 Linux最新版
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
