用 HTML / CSS /JS 打造实时加密行情小工具

Posted by JZW 加密货币资讯站 on September 5, 2025

实时追踪 比特币、以太坊 等加密资产价格是入门前端开发的热门实战案例。本文手把手教你从零搭建一个 实时加密行情小工具，只用最基础的 HTML、CSS 和 JavaScript，并通过 CoinGecko API 拉取最新数据。阅读完你将收获：

  • 完整源码与逐行注解
  • 实用 前端优化技巧
  • 可随时拓展的个人 加密行情面板

👉立即查看源码实战思路，只花十分钟即可跑通！

01 前置条件与环境

需求 说明
基础知识 掌握 HTML 元素、CSS 布局、JS 异步请求
工具 VSCode（推荐）、Chrome 开发者工具
API CoinGecko 免费公共接口
网络 随时可以访问外网获取最新行情

代码无需后端部署，可直接用 live-server 或双击 index.html 本地测试。

02 页面骨架：HTML 部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>实时加密行情</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
  <h1>加密行情实时看板</h1>
  <button id="theme-toggle">暗色模式</button>
</header>

<main>
  <input id="search" type="text" placeholder="搜索币种...">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>名称</th>
        <th>符号</th>
        <th>价格(USD)</th>
        <th>市值</th>
      </tr>
    </thead>
    <tbody id="crypto-table"></tbody>
  </table>
</main>

<footer>
  <p>数据来自 CoinGecko API</p>
</footer>

<script src="script.js"></script>
</body>
</html>

关键词自然出现：实时行情、CoinGecko API 接口、前端开发小项目。

03 视觉美化：CSS 关键片段

:root {
  --purple: #825CFF;
  --bg-light: #f0f4f8;
  --text: #333;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: var(--bg-light);
  color: var(--text);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--purple);
  color: #fff;
  padding: 1rem 2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th, td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
}

th {
  background: var(--purple);
  color: #fff;
}
  • 暗色模式只需对 body.dark-mode 切换配色，下一节会用 JavaScript 动态加类名。
  • 总计不足一百行，即可拥有移动端适配效果。

04 行为逻辑：JavaScript 三步完成

1) 取数据

const API_URL = 'https://api.coingecko.com/api/v3/coins/markets' +
                 '?vs_currency=usd&per_page=20&order=market_cap_desc';

async function fetchCryptoData() {
  const res = await fetch(API_URL);
  const data = await res.json();
  renderTable(data);
}

2) 渲染到表格

function renderTable(list) {
  const tbody = document.getElementById('crypto-table');
  tbody.innerHTML = '';
  list.forEach((coin, idx) => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${idx + 1}</td>
      <td class="crypto-image">
        <img src="${coin.image}" alt="${coin.name}">
        <span>${coin.name}</span>
      </td>
      <td>${coin.symbol.toUpperCase()}</td>
      <td>$${coin.current_price.toLocaleString()}</td>
      <td>$${coin.market_cap.toLocaleString()}</td>
    `;
    tbody.appendChild(tr);
  });
}

3) 搜索 & 暗色模式

document.getElementById('search').addEventListener('input', e => {
  const kw = e.target.value.toLowerCase();
  document.querySelectorAll('#crypto-table tr').forEach(tr => {
    const name = tr.children[1]?.textContent.toLowerCase();
    tr.style.display = name?.includes(kw) ? '' : 'none';
  });
});

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

首屏加载即调用 fetchCryptoData() 即可完成实时数据展示。

👉把以上代码完整复制粘贴即可运行，遇到报错先看这 5 个最常见坑！

05 进阶玩法

功能 思路简述
价格刷新 setInterval(fetchCryptoData, 30000) 每 30 秒更新
多币种对 修改 vs_currency=cny 可切换人民币计价
涨跌箭头 对比 price_change_24h 生成 ↑ / ↓
响应式图表 用 Chart.js 把价格绘成折线

06 FAQ：快问快答

Q1：CoinGecko API 需要密钥吗？
A：完全免费且无需注册即可使用，每分钟最多 50 次请求，足够个人练习。

Q2：数据延迟多久？
A：官方平均延迟 < 1 分钟，用于展示绰绰有余，但实盘交易需依赖专业行情源。

Q3：想加入更多币种怎么办？
A：把 per_page 调高或直接调用分页参数 &page=2。

Q4：部署到 GitHub Pages 为何空白？
A：大概率使用了 module 或 require 语法；使用纯 <script src="script.js"></script> 即可。

Q5：暗色模式在 Chrome DevTools 无效果？
A：确认已引入对应 CSS .dark-mode，并清理浏览器缓存。

Q6：能用 Vue 或 React 改写吗？
A：完全可以。核心仍是调用同一 CoinGecko API 接口，只需把渲染逻辑换成框架语法即可。

07 小结

通过不到 200 行代码，我们就完成了：

  • 实时行情调用
  • 内置 搜索过滤
  • 一键 暗色主题切换

这是入门级区块链前端项目的最佳起点。当你熟悉流程后，可进一步对接 WebSocket 获取深度挂单或交易数据，或把项目打包成 PWA 离线查看。

现在就动手创建属于你的 加密价格追踪器 吧！

CATALOG