云剪贴板

无需后端，直接打开HTML文件即可使用，核心功能包括“自动截取完整卡号的前6-8位BIN”“匹配卡信息并展示”，且适配手机/电脑端。
一、使用前准备（3步）

下载BIN数据：访问 venelinkochev/bin-list-data，下载仓库中的 bin-list-data.csv 文件。
转换CSV为JSON：用在线工具（如 CSV转JSON）将 bin-list-data.csv 转为JSON文件，命名为 bin-data.json（需确保字段与代码匹配，如 bin/brand/type 等）。
放置文件：将 bin-data.json 与下方的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>BIN查询工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Arial", "微软雅黑", sans-serif;
        }
        body {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 25px;
            font-size: 24px;
        }
        .input-group {
            margin-bottom: 20px;
        }
        input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            outline: none;
        }
        input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
        }
        button {
            width: 100%;
            padding: 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #2980b9;
        }
        .tip {
            color: #7f8c8d;
            font-size: 14px;
            margin-top: 8px;
            text-align: center;
        }
        .result {
            margin-top: 25px;
            padding: 20px;
            border-radius: 6px;
            background: #f8f9fa;
            display: none; /* 初始隐藏结果 */
        }
        .result-title {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .result-item {
            margin: 10px 0;
            font-size: 16px;
            color: #34495e;
        }
        .result-item span {
            color: #7f8c8d;
            margin-right: 8px;
        }
        .error {
            margin-top: 20px;
            color: #e74c3c;
            text-align: center;
            font-size: 16px;
            display: none; /* 初始隐藏错误提示 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>BIN卡号查询工具</h1>
        <div class="input-group">
            <input 
                type="text" 
                id="binInput" 
                placeholder="输入6-8位BIN或完整银行卡号（自动截取前8位）"
                maxlength="19" <!-- 银行卡号最大19位 -->
            >
            <div class="tip">示例：输入 401288（6位BIN）或 4012881234567890123（完整卡号）</div>
        </div>
        <button id="queryBtn">查询卡信息</button>

        <!-- 结果展示区 -->
        <div class="result" id="resultBox">
            <div class="result-title">查询结果</div>
            <div class="result-item"><span>BIN码：</span><span id="resBin"></span></div>
            <div class="result-item"><span>卡品牌：</span><span id="resBrand"></span></div>
            <div class="result-item"><span>卡类型：</span><span id="resType"></span></div>
            <div class="result-item"><span>发卡国家：</span><span id="resCountry"></span></div>
            <div class="result-item"><span>发卡银行：</span><span id="resBank"></span></div>
            <div class="result-item"><span>银行网址：</span><span id="resBankUrl"></span></div>
            <div class="result-item"><span>银行电话：</span><span id="resBankPhone"></span></div>
        </div>

        <!-- 错误提示区 -->
        <div class="error" id="errorBox">未查询到该BIN的相关信息，请检查输入是否正确</div>
    </div>

    <script>
        // 1. 获取DOM元素
        const binInput = document.getElementById('binInput');
        const queryBtn = document.getElementById('queryBtn');
        const resultBox = document.getElementById('resultBox');
        const errorBox = document.getElementById('errorBox');
        let binData = []; // 存储BIN数据的JSON数组

        // 2. 加载BIN数据（页面加载时执行）
        window.onload = async function() {
            try {
                // 读取同文件夹下的 bin-data.json（路径需正确）
                const response = await fetch('bin-data.json');
                binData = await response.json();
                console.log('BIN数据加载成功，共 ' + binData.length + ' 条记录');
            } catch (err) {
                alert('BIN数据加载失败！请检查 bin-data.json 文件是否在同一文件夹，且路径正确');
                console.error(err);
            }
        };

        // 3. 核心查询逻辑
        queryBtn.addEventListener('click', function() {
            // 隐藏结果和错误提示（重置状态）
            resultBox.style.display = 'none';
            errorBox.style.display = 'none';

            // 获取用户输入，去除空格
            const input = binInput.value.trim().replace(/\s/g, '');
            if (!input) {
                alert('请输入6-8位BIN或完整银行卡号');
                return;
            }
            if (!/^\d+$/.test(input)) {
                alert('输入只能包含数字，不能有字母或符号');
                return;
            }

            // 自动截取BIN：输入>=8位取前8位，否则取实际长度（6-7位）
            const binLength = input.length >= 8 ? 8 : input.length;
            const targetBin = input.slice(0, binLength);
            console.log('截取的查询BIN：', targetBin);

            // 匹配BIN数据（优先匹配8位，无结果则尝试6位）
            let matched = binData.find(item => item.bin === targetBin);
            if (!matched && binLength === 8) {
                const targetBin6 = targetBin.slice(0, 6);
                matched = binData.find(item => item.bin === targetBin6);
            }

            // 展示结果或错误
            if (matched) {
                // 填充结果到页面
                document.getElementById('resBin').textContent = matched.bin || '未知';
                document.getElementById('resBrand').textContent = matched.brand || '未知';
                document.getElementById('resType').textContent = matched.type || '未知';
                document.getElementById('resCountry').textContent = matched.country || '未知';
                document.getElementById('resBank').textContent = matched.bank || '未知';
                // 银行网址处理（添加链接）
                const bankUrl = matched.bank_url || '未知';
                document.getElementById('resBankUrl').innerHTML = bankUrl === '未知' ? '未知' : `<a href="${bankUrl}" target="_blank">${bankUrl}</a>`;
                document.getElementById('resBankPhone').textContent = matched.bank_phone || '未知';
                // 显示结果
                resultBox.style.display = 'block';
            } else {
                // 显示错误
                errorBox.style.display = 'block';
            }
        });

        // 4. 快捷键支持：按Enter触发查询
        binInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                queryBtn.click();
            }
        });
    </script>
</body>
</html>
.基于 venelinkochev/bin-list-data 的纯前端BIN查询网站

一、使用前准备（3步）

二、完整代码
