网页版股票行情代码如何实时获取？不同行情源代码格式差异怎么统一处理？

咔咔今天 1 抢沙发

默认

摘要： 功能特点实时数据获取：通过 fetch API 从免费的 Alpha Vantage 数据源获取数据，交互式搜索：用户可以输入股票代码（如 AAPL, TSLA, SZ）进行查询，...

功能特点

实时数据获取：通过 fetch API 从免费的 Alpha Vantage 数据源获取数据。
交互式搜索：用户可以输入股票代码（如 AAPL, TSLA, SZ）进行查询。
清晰的数据展示：以表格形式展示股票的关键信息，包括当前价、开盘价、最高价、最低价、成交量等。
友好的用户界面：包含搜索框、加载状态提示和错误信息显示。
响应式设计：适配不同屏幕尺寸。

第一步：获取免费的股票API Key

我们使用 Alpha Vantage 的免费API，它每天有500次调用限制,非常适合个人项目使用。

访问 Alpha Vantage 官网。
注册一个免费账户，他们会立即发送一个 API Key 到你的邮箱。
在下面的代码中，将 YOUR_API_KEY 替换为你自己的密钥。

第二步：完整的HTML代码

您可以将以下所有代码复制到一个 .html 文件中（stock.html）,然后用浏览器打开它即可运行。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">网页版股票行情</title>
    <style>
        /* --- 基础样式 --- */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f4f7f6;
            color: #333;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
        }
        /* --- 搜索框样式 --- */
        .search-container {
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
        }
        #stockInput {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box; /* 确保 padding 不会增加宽度 */
            transition: border-color 0.3s;
        }
        #stockInput:focus {
            outline: none;
            border-color: #3498db;
        }
        button {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            color: white;
            background-color: #3498db;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        /* --- 数据表格样式 --- */
        #stockData {
            width: 100%;
            max-width: 800px;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden; /* 使圆角生效 */
            display: none; /* 初始隐藏 */
        }
        #stockData th, #stockData td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        #stockData th {
            background-color: #34495e;
            color: white;
            font-weight: bold;
        }
        #stockData tr:last-child td {
            border-bottom: none;
        }
        /* --- 状态信息样式 --- */
        .status-message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            width: 100%;
            max-width: 500px;
            text-align: center;
            font-weight: bold;
            display: none; /* 初始隐藏 */
        }
        .loading {
            background-color: #e8f4f8;
            color: #3498db;
        }
        .error {
            background-color: #fdeaea;
            color: #e74c3c;
        }
        .success {
            background-color: #eafaf1;
            color: #27ae60;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            #stockData th, #stockData td {
                padding: 10px 8px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <h1>📈 股票行情查询</h1>
    <div class="search-container">
        <input type="text" id="stockInput" placeholder="请输入股票代码 ( AAPL, TSLA, 000001.SZ)">
        <button id="searchButton">查询</button>
    </div>
    <div id="statusMessage" class="status-message"></div>
    <table id="stockData">
        <thead>
            <tr>
                <th>属性</th>
                <th>数值</th>
            </tr>
        </thead>
        <tbody id="stockTableBody">
            <!-- 数据将通过 JavaScript 动态插入这里 -->
        </tbody>
    </table>
    <script>
        // --- 配置 ---
        // !!! 重要：请将 'YOUR_API_KEY' 替换成你自己的 Alpha Vantage API Key
        const API_KEY = 'YOUR_API_KEY'; 
        const API_URL = 'https://www.alphavantage.co/query';
        // --- DOM 元素 ---
        const stockInput = document.getElementById('stockInput');
        const searchButton = document.getElementById('searchButton');
        const stockData = document.getElementById('stockData');
        const stockTableBody = document.getElementById('stockTableBody');
        const statusMessage = document.getElementById('statusMessage');
        // --- 事件监听 ---
        searchButton.addEventListener('click', fetchStockData);
        stockInput.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
                fetchStockData();
            }
        });
        // --- 主要功能函数 ---
        function fetchStockData() {
            const symbol = stockInput.value.trim().toUpperCase();
            if (!symbol) {
                showStatus('请输入股票代码', 'error');
                return;
            }
            // 显示加载状态
            showStatus('正在查询数据，请稍候...', 'loading');
            stockData.style.display = 'none';
            // 构建 API 请求 URL
            const url = `${API_URL}?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${API_KEY}`;
            // 使用 Fetch API 获取数据
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`网络请求失败，状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 检查 API 返回的错误信息
                    if (data['Error Message']) {
                        throw new Error(data['Error Message']);
                    }
                    if (data['Information']) {
                        // 免费用户每分钟调用次数限制
                        throw new Error(data['Information']);
                    }
                    displayStockData(data);
                })
                .catch(error => {
                    console.error('获取数据时出错:', error);
                    showStatus(`查询失败: ${error.message}`, 'error');
                });
        }
        function displayStockData(data) {
            // Alpha Vantage 的 GLOBAL_QUOTE 数据在 'Global Quote' 对象中
            const quote = data['Global Quote'];
            if (!quote) {
                showStatus('未找到该股票的数据，请检查股票代码是否正确。', 'error');
                return;
            }
            // 清空表格
            stockTableBody.innerHTML = '';
            // 创建要显示的数据对象
            const stockInfo = {
                '股票代码': quote['01. symbol'],
                '最新价格': quote['05. price'],
                '开盘价': quote['02. open'],
                '最高价': quote['03. high'],
                '最低价': quote['04. low'],
                '成交量': quote['06. volume'],
                '最新交易时间': quote['07. latest trading day'],
                '昨日收盘价': quote['08. previous close'],
                '价格变动': quote['09. change'],
                '价格变动百分比': quote['10. change percent']
            };
            // 动态创建表格行
            for (const [key, value] of Object.entries(stockInfo)) {
                const row = document.createElement('tr');
                row.innerHTML = `<td>${key}</td><td>${value}</td>`;
                stockTableBody.appendChild(row);
            }
            // 显示表格，隐藏状态信息
            stockData.style.display = 'table';
            statusMessage.style.display = 'none';
        }
        function showStatus(message, type) {
            statusMessage.textContent = message;
            statusMessage.className = `status-message ${type}`;
            statusMessage.style.display = 'block';
            stockData.style.display = 'none';
        }
    </script>
</body>
</html>

代码结构解析

HTML 结构 (`<body>`)

<h1>: 页面标题。
.search-container: 包含输入框和查询按钮的容器。
#stockInput: 用户输入股票代码的文本框。
#searchButton: 触发查询的按钮。
#statusMessage: 用于显示加载、成功或错误信息的区域。
#stockData: 展示股票数据的表格，初始状态为 display: none,即隐藏。

CSS 样式 (`<style>`)

全局样式: 设置了字体、背景色、外边距等,让页面看起来更清爽。
搜索框和按钮: 使用了现代化的设计，包括圆角、过渡效果和悬停状态。
数据表格: 使用 border-collapse 和 box-shadow 创建了一个美观的卡片式表格。
状态信息: 根据不同状态（loading, error, success）显示不同颜色的背景和文字,提供清晰的反馈。
响应式: 通过 @media 查询，在小屏幕上调整字体和内边距,保证移动端体验。

JavaScript 逻辑 (`<script>`)

配置:
- API_KEY: 这是你需要修改的地方，填入你从 Alpha Vantage 获取的密钥。
- API_URL: Alpha Vantage 的 API 地址。
DOM 元素: 获取所有需要操作的 HTML 元素,方便后续使用。
事件监听:
- 点击 searchButton 或在 stockInput 中按 Enter 键都会触发 fetchStockData 函数。
fetchStockData() 函数 (核心逻辑):
1. 获取输入: 获取用户输入的股票代码,并转换为大写。
2. 验证输入: 检查输入是否为空。
3. 显示加载状态: 调用 showStatus 显示“正在查询...”,并隐藏数据表格。
4. 构建请求URL: 将股票符号和 API Key 拼接到 Alpha Vantage 的 URL 中。
5. 发起请求: 使用 fetch 发起网络请求。
6. 处理响应:
  - .then(response => ...): 检查网络请求本身是否成功。
  - .then(data => ...): 解析返回的 JSON 数据，这里特别处理了 API 可能返回的错误信息（如股票代码不存在或调用频率超限）。
  - .catch(error => ...): 捕获并处理任何在过程中发生的错误（如网络断开）。
7. 成功回调: 如果数据获取成功，调用 displayStockData 函数来渲染数据。
displayStockData() 函数:
1. 从返回的复杂数据对象 data['Global Quote'] 中提取我们需要的字段。
2. 创建一个更易读的 stockInfo 对象，将英文的 API 字段名映射为中文。
3. 遍历 stockInfo 对象，为每个键值对动态创建一个 <tr>（表格行）并插入到 <tbody> 中。
4. 显示数据表格,并隐藏状态信息。
showStatus() 函数: 一个辅助函数,用于统一管理状态信息的显示和样式。

如何使用和扩展

替换API Key: 将代码中的 YOUR_API_KEY 替换为你自己的。
测试: 打开 stock.html 文件，输入一个有效的股票代码（如 AAPL 或 MSFT）进行测试。
扩展功能:
- 历史数据: 可以修改 function 参数，例如使用 function=TIME_SERIES_DAILY 来获取每日历史数据，并用图表库（如 Chart.js）进行展示。
- 搜索建议: 可以增加一个输入框的自动补全功能，当用户输入时，调用 function=SYMBOL_SEARCH 来匹配并显示股票代码建议。
- 多只股票: 可以修改页面,允许用户添加多只股票到列表中进行对比。
- 数据缓存: 使用 localStorage 缓存已查询过的股票数据，减少 API 调用次数,加快页面响应速度。