本教程將指導您建立實用的隨機報價產生器應用程序，非常適合學習編碼基礎知識。 我們將用詳細的程式碼範例來介紹每個步驟，讓初學者可以輕鬆遵循。
專案概況
此應用程式從公共 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塊和元素的選項。
使您的第一個自定義苗條過渡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 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
