本教程将指导您构建实用的随机报价生成器应用程序，非常适合学习编码基础知识。 我们将用详细的代码示例来介绍每个步骤，使初学者可以轻松遵循。
项目概况
此应用程序从公共 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中文网其他相关文章！
揭开屏幕读取器的神秘面纱：可访问的表格和最佳实践Mar 08, 2025 am 09:45 AM这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章，请查看“以：focus-visible的管理用户焦点”。在
使用智能表单框架创建JavaScript联系表格Mar 07, 2025 am 11:33 AM本教程演示了使用智能表单框架创建外观专业的JavaScript表单（注意：不再可用）。 尽管框架本身不可用，但原理和技术仍然与其他形式的建筑商相关。
将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PMCSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例，以及我们必须将这些样式应用于WordPress块和元素的选项。
比较5个最佳的PHP形式构建器（和3个免费脚本）Mar 04, 2025 am 10:22 AM本文探讨了Envato Market上可用的PHP表单构建器脚本，比较了其功能，灵活性和设计。 在研究特定选项之前，让我们了解PHP形式构建器是什么以及为什么要使用一个。 PHP形式
使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
Dreamweaver Mac版
视觉化网页开发工具
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
Atom编辑器mac版下载
最流行的的开源编辑器
记事本++7.3.1
好用且免费的代码编辑器
