如何高效增加快递信息网页功能？-上海晋兰物流

输入查询：用户可以输入快递单号。
快速选择：提供常用快递公司的快捷选择按钮。
结果显示：清晰展示快递公司、物流状态和详细的物流轨迹。
响应式设计：在电脑和手机上都有良好的显示效果。

使用现成的免费API（推荐，最简单）

这种方法最简单，您无需自己处理复杂的快递数据，只需要调用一个免费的公开API即可，这里我们使用 快递100 的免费API作为示例。

第1步：获取API Key

访问快递100开放平台。
注册并登录账号。
在“管理中心” -> “我的接口”中，可以申请一个免费的 API Key，对于个人学习和非商业使用,免费额度通常足够。

第2步：编写网页代码 (`index.html`)

将以下代码保存为一个 .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>
        /* --- 基础样式 --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f4f7f6;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        /* --- 查询表单样式 --- */
        .query-form {
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        #trackingNumber {
            flex-grow: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        #trackingNumber:focus {
            outline: none;
            border-color: #3498db;
        }
        #queryBtn {
            padding: 12px 25px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #queryBtn:hover {
            background-color: #2980b9;
        }
        /* --- 快捷选择按钮样式 --- */
        .quick-select {
            margin-bottom: 20px;
        }
        .quick-select h3 {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        .company-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .company-btn {
            padding: 8px 15px;
            background-color: #ecf0f1;
            border: 1px solid #bdc3c7;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .company-btn:hover, .company-btn.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }
        /* --- 结果显示区域样式 --- */
        .result-container {
            margin-top: 30px;
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            display: none; /* 默认隐藏 */
        }
        .result-header {
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .result-company {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
        }
        .result-status {
            font-size: 14px;
            color: #27ae60;
            margin-top: 5px;
        }
        .timeline {
            list-style: none;
        }
        .timeline-item {
            padding: 15px 0;
            border-left: 2px solid #ecf0f1;
            position: relative;
            padding-left: 25px;
        }
        .timeline-item:last-child {
            border-left-color: #3498db;
        }
        .timeline-item::before {
            content: '';
            width: 12px;
            height: 12px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            left: -7px;
            top: 20px;
        }
        .timeline-time {
            font-size: 12px;
            color: #95a5a6;
        }
        .timeline-content {
            font-size: 14px;
            color: #2c3e50;
        }
        .error-message {
            color: #e74c3c;
            text-align: center;
            padding: 20px;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 600px) {
            .container {
                margin: 20px auto;
                padding: 10px;
            }
            .input-group {
                flex-direction: column;
            }
            #queryBtn {
                width: 100%;
            }
            .company-buttons {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📦 快递信息查询</h1>
        <div class="query-form">
            <div class="input-group">
                <input type="text" id="trackingNumber" placeholder="请输入您的快递单号">
                <button id="queryBtn">查询</button>
            </div>
            <div class="quick-select">
                <h3>常用快递</h3>
                <div class="company-buttons">
                    <button class="company-btn" data-company="顺丰速运">顺丰</button>
                    <button class="company-btn" data-company="中通快递">中通</button>
                    <button class="company-btn" data-company="圆通速递">圆通</button>
                    <button class="company-btn" data-company="申通快递">申通</button>
                    <button class="company-btn" data-company="韵达速递">韵达</button>
                    <button class="company-btn" data-company="京东物流">京东</button>
                    <button class="company-btn" data-company="邮政EMS">EMS</button>
                </div>
            </div>
        </div>
        <div id="resultContainer" class="result-container">
            <!-- 结果将通过 JavaScript 动态插入这里 -->
        </div>
    </div>
    <script>
        // --- 配置 ---
        // 请将 'YOUR_API_KEY' 替换为您在快递100平台申请的API Key
        const API_KEY = 'YOUR_API_KEY'; 
        const API_URL = 'https://poll.kuaidi100.com/poll/query.do';
        // --- DOM 元素 ---
        const trackingNumberInput = document.getElementById('trackingNumber');
        const queryBtn = document.getElementById('queryBtn');
        const resultContainer = document.getElementById('resultContainer');
        const companyButtons = document.querySelectorAll('.company-btn');
        // --- 事件监听 ---
        queryBtn.addEventListener('click', handleQuery);
        trackingNumberInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                handleQuery();
            }
        });
        companyButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                // 移除其他按钮的 active 类
                companyButtons.forEach(b => b.classList.remove('active'));
                // 为当前按钮添加 active 类
                btn.classList.add('active');
                // 填充快递公司到输入框
                trackingNumberInput.value = btn.dataset.company;
            });
        });
        // --- 核心查询函数 ---
        async function handleQuery() {
            const trackingNumber = trackingNumberInput.value.trim();
            if (!trackingNumber) {
                alert('请输入快递单号！');
                return;
            }
            queryBtn.textContent = '查询中...';
            queryBtn.disabled = true;
            resultContainer.style.display = 'block';
            resultContainer.innerHTML = '<p class="error-message">正在努力查询中，请稍候...</p>';
            try {
                const params = new URLSearchParams({
                    com: '', // 快递100会自动识别，留空即可
                    num: trackingNumber,
                    key: API_KEY,
                    show: '0', // 0:返回全部即时通讯接口, 1:返回解析后的消息，默认为0
                    order: 'desc', // 按时间正序还是倒序排列
                });
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: params.toString()
                });
                const data = await response.json();
                if (data.message === 'ok') {
                    displayResult(data);
                } else {
                    // 处理API返回的错误，如单号不存在、快递公司错误等
                    resultContainer.innerHTML = `<p class="error-message">查询失败: ${data.message}</p>`;
                }
            } catch (error) {
                console.error('网络请求错误:', error);
                resultContainer.innerHTML = `<p class="error-message">网络错误，请稍后再试。</p>`;
            } finally {
                queryBtn.textContent = '查询';
                queryBtn.disabled = false;
            }
        }
        // --- 显示结果函数 ---
        function displayResult(data) {
            const { com, status, state, traces } = data;
            let statusText = '';
            let statusColor = '';
            switch (state) {
                case '0':
                    statusText = '在途中';
                    statusColor = '#f39c12';
                    break;
                case '1':
                    statusText = '已揽收';
                    statusColor = '#3498db';
                    break;
                case '2':
                    statusText = '疑难';
                    statusColor = '#e67e22';
                    break;
                case '3':
                    statusText = '已签收';
                    statusColor = '#27ae60';
                    break;
                case '4':
                    statusText = '已退回';
                    statusColor = '#e74c3c';
                    break;
                case '5':
                    statusText = '派送中';
                    statusColor = '#9b59b6';
                    break;
                default:
                    statusText = '未知状态';
                    statusColor = '#95a5a6';
            }
            let resultHTML = `
                <div class="result-header">
                    <div class="result-company">快递公司: ${com}</div>
                    <div class="result-status" style="color: ${statusColor};">物流状态: ${statusText}</div>
                </div>
                <ul class="timeline">
            `;
            // 倒序显示，最新的物流信息在最上面
            traces.slice().reverse().forEach(trace => {
                resultHTML += `
                    <li class="timeline-item">
                        <div class="timeline-time">${trace.time}</div>
                        <div class="timeline-content">${trace.location} ${trace.context}</div>
                    </li>
                `;
            });
            resultHTML += '</ul>';
            resultContainer.innerHTML = resultHTML;
        }
    </script>
</body>
</html>

如何使用这个方案：

申请API Key：按照上面的“第1步”操作。
修改代码：打开 index.html 文件，找到这一行：
```
const API_KEY = 'YOUR_API_KEY'; 
```
将 'YOUR_API_KEY' 替换成你自己的真实API Key。
打开网页：用浏览器（如Chrome, Edge）打开这个HTML文件即可使用。

纯前端静态展示（无需API，无真实数据）

如果您只是想展示一个网页的“样子”，或者不想依赖外部API，可以创建一个静态页面,点击查询按钮后显示预设的模拟数据。

代码 (`index-static.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">快递信息查询 (静态演示)</title>
    <!-- 引入一个图标库，让界面更美观 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 样式与方案一基本相同，这里只做微调 */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            width: 100%;
            max-width: 800px;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-weight: 300;
        }
        .query-form, .result-container {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        #trackingNumber {
            flex-grow: 1;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }
        #trackingNumber:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        #queryBtn {
            padding: 15px 30px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
        }
        #queryBtn:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
        }
        .quick-select h3 {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        .company-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .company-btn {
            padding: 10px 20px;
            background-color: #ecf0f1;
            border: 1px solid #bdc3c7;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .company-btn:hover, .company-btn.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
            transform: scale(1.05);
        }
        .result-container {
            display: none; /* 默认隐藏 */
        }
        .result-header {
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 20px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .result-company {
            font-size: 20px;
            font-weight: bold;
            color: #2c3e50;
        }
        .result-status {
            font-size: 16px;
            color: #27ae60;
            font-weight: 500;
        }
        .timeline {
            list-style: none;
        }
        .timeline-item {
            padding: 20px 0;
            border-left: 3px solid #ecf0f1;
            position: relative;
            padding-left: 30px;
        }
        .timeline-item:last-child {
            border-left-color: #3498db;
        }
        .timeline-item::before {
            content: '';
            width: 15px;
            height: 15px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            left: -8.5px;
            top: 23px;
            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
        }
        .timeline-time {
            font-size: 13px;
            color: #95a5a6;
            margin-bottom: 5px;
        }
        .timeline-content {
            font-size: 15px;
            color: #2c3e50;
        }
        .error-message {
            color: #e74c3c;
            text-align: center;
            padding: 20px;
            font-size: 16px;
        }
        @media (max-width: 600px) {
            .container { padding: 15px; }
            .input-group { flex-direction: column; }
            #queryBtn { width: 100%; }
            .company-buttons { justify-content: center; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-box"></i> 快递信息查询</h1>
        <div class="query-form">
            <div class="input-group">
                <input type="text" id="trackingNumber" placeholder="请输入您的快递单号，SF1234567890">
                <button id="queryBtn"><i class="fas fa-search"></i> 查询</button>
            </div>
            <div class="quick-select">
                <h3>常用快递</h3>
                <div class="company-buttons">
                    <button class="company-btn" data-company="顺丰速运">顺丰</button>
                    <button class="company-btn" data-company="中通快递">中通</button>
                    <button class="company-btn" data-company="圆通速递">圆通</button>
                    <button class="company-btn" data-company="申通快递">申通</button>
                    <button class="company-btn" data-company="韵达速递">韵达</button>
                    <button class="company-btn" data-company="京东物流">京东</button>
                    <button class="company-btn" data-company="邮政EMS">EMS</button>
                </div>
            </div>
        </div>
        <div id="resultContainer" class="result-container">
            <!-- 结果将通过 JavaScript 动态插入这里 -->
        </div>
    </div>
    <script>
        const trackingNumberInput = document.getElementById('trackingNumber');
        const queryBtn = document.getElementById('queryBtn');
        const resultContainer = document.getElementById('resultContainer');
        const companyButtons = document.querySelectorAll('.company-btn');
        queryBtn.addEventListener('click', handleQuery);
        trackingNumberInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') handleQuery();
        });
        companyButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                companyButtons.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                trackingNumberInput.value = btn.dataset.company;
            });
        });
        function handleQuery() {
            const trackingNumber = trackingNumberInput.value.trim();
            if (!trackingNumber) {
                alert('请输入快递单号！');
                return;
            }
            queryBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 查询中...';
            queryBtn.disabled = true;
            resultContainer.style.display = 'block';
            resultContainer.innerHTML = '<p class="error-message">正在努力查询中，请稍候...</p>';
            // 模拟网络延迟
            setTimeout(() => {
                // 模拟数据
                const mockData = {
                    com: "顺丰速运",
                    status: "运输中",
                    state: "0", // 0:在途中
                    number: trackingNumber,
                    traces: [
                        { time: "2025-10-27 15:30:00", location: "深圳市南山区", context: "快件已由[深圳南山营业点]安排投递" },
                        { time: "2025-10-27 08:15:00", location: "深圳市南山区", context: "快件已到达[深圳南山营业点]" },
                        { time: "2025-10-26 22:50:00", location: "广州市", context: "快件已离开[广州转运中心]" },
                        { time: "2025-10-26 20:10:00", location: "广州市", context: "快件已到达[广州转运中心]" },
                        { time: "2025-10-26 10:05:00", location: "上海市", context: "快件已离开[上海浦东营业点]" },
                        { time: "2025-10-25 18:00:00", location: "上海市", context: "快件已由[上海浦东营业点]收件" }
                    ]
                };
                displayResult(mockData);
                queryBtn.innerHTML = '<i class="fas fa-search"></i> 查询';
                queryBtn.disabled = false;
            }, 1500); // 延迟1.5秒，模拟网络请求
        }
        function displayResult(data) {
            const { com, status, state, traces } = data;
            let statusText = '';
            let statusColor = '';
            switch (state) {
                case '0': statusText = '在途中'; statusColor = '#f39c12'; break;
                case '1': statusText = '已揽收'; statusColor = '#3498db'; break;
                case '2': statusText = '疑难'; statusColor = '#e67e22'; break;
                case '3': statusText = '已签收'; statusColor = '#27ae60'; break;
                case '4': statusText = '已退回'; statusColor = '#e74c3c'; break;
                case '5': statusText = '派送中'; statusColor = '#9b59b6'; break;
                default: statusText = '未知状态'; statusColor = '#95a5a6';
            }
            let resultHTML = `
                <div class="result-header">
                    <i class="fas fa-truck" style="font-size: 24px; color: #3498db;"></i>
                    <div>
                        <div class="result-company">快递公司: ${com}</div>
                        <div class="result-status" style="color: ${statusColor};">物流状态: ${statusText}</div>
                    </div>
                </div>
                <ul class="timeline">
            `;
            traces.slice().reverse().forEach(trace => {
                resultHTML += `
                    <li class="timeline-item">
                        <div class="timeline-time">${trace.time}</div>
                        <div class="timeline-content">${trace.location} ${trace.context}</div>
                    </li>
                `;
            });
            resultHTML += '</ul>';
            resultContainer.innerHTML = resultHTML;
        }
    </script>
</body>
</html>

这个静态版本不需要任何配置，直接保存为HTML文件打开即可，它通过 setTimeout 模拟了网络请求的延迟，并展示了一套固定的模拟数据,非常适合用于演示或教学。

特性	方案一 (API调用)	方案二 (静态展示)
数据真实性	✅ 真实、实时的快递数据	❌ 模拟的、固定的数据
依赖性	❌ 需要申请并使用第三方API	✅ 无任何外部依赖，纯前端
适用场景	个人项目、小工具、真实应用	网站原型、学习演示、UI展示
复杂度	稍高（需管理API Key）	极低（开箱即用）

您可以根据您的具体需求选择合适的方案，对于大多数想拥有一个真实功能的人来说，方案一是最佳选择。

（图片来源网络，侵删）

如何高效增加快递信息网页功能？

使用现成的免费API（推荐，最简单）

第1步：获取API Key

第2步：编写网页代码 (`index.html`)

如何使用这个方案：

纯前端静态展示（无需API，无真实数据）

代码 (`index-static.html`)

相关文章

最近发表

网站分类

动态快讯

标签列表

# 单号

# 百世快递

# 物流

# 顺丰

# 查询

# 物流信息

# 订单号

# 快递单号

# 路线

# 查

# 快递

# 寄快递

# 方法

# 名称由来

# 单号查询

# 原因

# 查不到

# 查询方法

# 快递查询

# 查快递

# 快递单号怎么查物流

# 物流信息查询平台

# 快递单号查询方法

# 快递单号实时查询

# 快递物流信息怎么查

目录[+]

使用现成的免费API（推荐，最简单）

第1步：获取API Key

第2步：编写网页代码 (index.html)

如何使用这个方案：

纯前端静态展示（无需API，无真实数据）

代码 (index-static.html)

相关文章

最近发表

网站分类

动态快讯

标签列表

# 单号

# 百世快递

# 物流

# 顺丰

# 查询

# 物流信息

# 订单号

# 快递单号

# 路线

# 查

# 快递

# 寄快递

# 方法

# 名称由来

# 单号查询

# 原因

# 查不到

# 查询方法

# 快递查询

# 查快递

# 快递单号怎么查物流

# 物流信息查询平台

# 快递单号查询方法

# 快递单号实时查询

# 快递物流信息怎么查

目录[+]

第2步：编写网页代码 (`index.html`)

代码 (`index-static.html`)