多进制奇偶校验检查器：HTML+CSS+JS 纯前端实现

样式美化（CSS）

样式设计遵循'简洁、清晰、易用'的原则，重点优化交互体验和视觉区分，核心样式如下：

4.1 全局样式与容器布局

设置全局字体、背景色，容器居中显示，添加阴影和圆角提升层次感，确保页面整洁美观：

body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f5f5f5;
}
.container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

4.2 输入与选择区样式

统一输入框、选择框、单选按钮的样式，设置间距和 hover 效果，提升交互体验：

.input-group {
    margin-bottom: 20px;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
input[type="text"], select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.radio-group {
    display: flex;
    gap: 20px;
    margin: 15px 0;
}
.radio-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

4.3 按钮与结果区样式

按钮设置全屏宽度，添加 hover 效果；结果区根据校验结果（通过/未通过/错误）区分背景色和文字色，让用户快速识别结果：

button {
    width: 100%;
    padding: 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
    background-color: #45a049;
}
.result {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}
.even-result {
    background-color: #e8f5e9;
    color: #2e7d32;
}
.odd-result {
    background-color: #e3f2fd;
    color: #1976d2;
}
.error {
    background-color: #ffebee;
    color: #c62828;
}
.info {
    background-color: #fff3cd;
    color: #856404;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
}

核心功能实现（JavaScript）

核心逻辑分为 5 个模块，均采用原生 JavaScript 实现，函数独立封装，便于维护和扩展，同时添加输入校验和错误处理，提升工具稳定性和用户体验。

5.1 动态更新输入提示（updatePlaceholder）

根据选择的进制，动态修改输入框的 placeholder 提示，引导用户输入正确格式的数字，降低使用成本：

function updatePlaceholder() {
    const base = parseInt(document.getElementById('baseSelect').value);
    const numberInput = document.getElementById('numberInput');
    switch(base) {
        case 2:
            numberInput.placeholder = "请输入二进制数字，例如：10101";
            break;
        case 8:
            numberInput.placeholder = "请输入八进制数字，例如：77 (或 0o77)";
            break;
        case 10:
            numberInput.placeholder = "请输入十进制数字，例如：25";
            break;
        case 16:
            numberInput.placeholder = "请输入十六进制数字，例如：A5 (或 0xA5)";
            break;
        default:
            numberInput.placeholder = `请输入${base}进制数字`;
    }
}

5.2 核心校验逻辑（performParityCheck）

这是工具的核心函数，负责获取用户输入、验证输入合法性、进制转换、奇偶校验，最终展示结果和转换详情，步骤如下：

1. 获取用户输入（数字、进制、校验类型），隐藏之前的结果和详情
2. 输入合法性校验（非空校验）
3. 识别进制前缀（0x、0o、0b），处理输入文本，确定实际进制
4. 通过正则表达式验证数字格式是否符合当前进制要求
5. 将输入数字转换为十进制，再转换为二进制（奇偶校验基于二进制中 1 的个数）
6. 计算二进制中 1 的个数，根据校验类型判断是否通过校验
7. 显示转换详情和校验结果，根据结果设置对应样式

function performParityCheck() {
    const numberStr = document.getElementById('numberInput').value.trim();
    const base = parseInt(document.getElementById('baseSelect').value);
    const parityType = document.querySelector('input[name="parityType"]:checked').value;
    const resultDiv = document.getElementById('result');
    const infoDiv = document.getElementById('info');

    // 隐藏之前的显示
    resultDiv.style.display = 'none';
    infoDiv.style.display = 'none';

    // 验证输入非空
    if(!numberStr) {
        showError('请输入数字');
        return;
    }

    // 处理带有前缀的输入（0x、0o、0b）
    let cleanNumberStr = numberStr;
    let detectedBase = base;
    if(cleanNumberStr.toLowerCase().startsWith('0x')) {
        detectedBase = 16;
        cleanNumberStr = cleanNumberStr.substring(2);
    } else if(cleanNumberStr.toLowerCase().startsWith('0o')) {
        detectedBase = 8;
        cleanNumberStr = cleanNumberStr.substring(2);
    } else if(cleanNumberStr.toLowerCase().startsWith('0b')) {
        detectedBase = 2;
        cleanNumberStr = cleanNumberStr.substring(2);
    }

    // 验证数字格式是否符合当前进制
    let validPattern;
    switch(detectedBase) {
        case 2:
            validPattern = /^[01]+$/; // 二进制仅允许 0 和 1
            break;
        case 8:
            validPattern = /^[0-7]+$/; // 八进制允许 0-7
            break;
        case 10:
            validPattern = /^[0-9]+$/; // 十进制允许 0-9
            break;
        case 16:
            validPattern = /^[0-9A-Fa-f]+$/; // 十六进制允许 0-9、A-F、a-f
            break;
        default:
            validPattern = /^[0-9A-Fa-f]+$/;
    }
    if(!validPattern.test(cleanNumberStr)) {
        showError(`请输入有效的${getBaseName(detectedBase)}数字`);
        return;
    }

    try {
        // 将输入的数字转换为十进制
        const decimalValue = parseInt(cleanNumberStr, detectedBase);
        if(isNaN(decimalValue)) {
            showError('无法解析输入的数字');
            return;
        }

        // 将十进制数转换为二进制字符串（奇偶校验的核心依据）
        const binaryStr = decimalValue.toString(2);

        // 计算二进制表示中 1 的个数
        let onesCount = 0;
        for(let i = 0; i < binaryStr.length; i++) {
            if(binaryStr[i] === '1') {
                onesCount++;
            }
        }

        // 根据校验类型判断结果
        let isValid = false;
        let resultText = '';
        if(parityType === 'even') {
            isValid = (onesCount % 2 === 0);
            resultText = `${getBaseName(detectedBase)}校验：输入 "${numberStr}" (${detectedBase}进制) 转换为二进制 "${binaryStr}"，包含 ${onesCount} 个 1，${isValid ?'通过校验':'未通过校验'} (期望偶数个 1)`;
        } else { // 奇校验
            isValid = (onesCount % 2 === 1);
            resultText = `${getBaseName(detectedBase)}校验：输入 "${numberStr}" (${detectedBase}进制) 转换为二进制 "${binaryStr}"，包含 ${onesCount} 个 1，${isValid ?'通过校验':'未通过校验'} (期望奇数个 1)`;
        }

        // 显示转换详情
        infoDiv.innerHTML = `转换详情：输入值：${numberStr} 解析为：${cleanNumberStr} (${detectedBase}进制) 十进制：${decimalValue} 二进制：${binaryStr}`;
        infoDiv.style.display = 'block';

        // 显示校验结果
        resultDiv.textContent = resultText;
        resultDiv.className = 'result';
        if(isValid) {
            resultDiv.classList.add(parityType === 'even' ? 'even-result' : 'odd-result');
        } else {
            resultDiv.classList.add('error');
        }
        resultDiv.style.display = 'block';
    } catch(e) {
        showError('数字转换过程中发生错误：' + e.message);
    }
}

5.3 辅助函数

包含 2 个辅助函数，用于优化代码复用性和用户体验：

1. getBaseName：根据进制数值，返回对应的进制名称（如 2→二进制），用于结果提示的可读性
2. showError：统一处理错误提示，隐藏详情区，设置错误样式，提升代码复用性

// 获取进制名称
function getBaseName(base) {
    switch(base) {
        case 2: return '二进制';
        case 8: return '八进制';
        case 10: return '十进制';
        case 16: return '十六进制';
        default: return base + '进制';
    }
}

// 显示错误提示
function showError(message) {
    const resultDiv = document.getElementById('result');
    const infoDiv = document.getElementById('info');
    resultDiv.textContent = message;
    resultDiv.className = 'result error';
    resultDiv.style.display = 'block';
    infoDiv.style.display = 'none';
}

5.4 初始化与交互优化

添加页面加载初始化、回车键触发校验，提升用户体验：

// 页面加载时初始化输入提示
window.onload = function(){
    updatePlaceholder();
};

// 回车键触发校验
document.getElementById('numberInput').addEventListener('keypress', function(event){
    if(event.key === 'Enter') {
        performParityCheck();
    }
});

工具使用说明

工具操作简单，无需复杂配置，步骤如下：

1. 复制完整代码，保存为「parity-checker.html」文件
2. 用浏览器打开该文件，进入工具界面
3. 选择进制：从下拉框中选择需要校验的数字进制（二进制、八进制、十进制、十六进制）
4. 输入数字：根据输入提示，输入对应格式的数字（支持前缀，如 0x1A、0b1010）
5. 选择校验类型：选择偶校验（默认）或奇校验
6. 执行校验：点击「执行校验」按钮，或按下回车键，即可查看校验结果和转换详情

注意：输入数字时需符合对应进制的规则（如二进制仅输入 0 和 1，十六进制可输入 0-9、A-F、a-f），工具会自动校验格式，若输入错误会给出明确提示。

功能扩展与优化建议

本工具已实现核心功能，可根据实际需求进一步扩展，推荐以下优化方向，适合进阶练习：

• 扩展进制支持：添加自定义进制（如 3 进制、5 进制），提升工具灵活性
• 交互优化：添加「清空输入」按钮、校验结果复制功能，输入实时校验（无需点击按钮）
• 样式优化：支持暗黑模式切换，适配移动端屏幕，提升移动端使用体验
• 功能扩展：添加批量校验功能，支持输入多个数字，批量执行奇偶校验
• 错误处理优化：替换 alert 提示为更美观的 Toast 组件，优化错误提示文案

总结

这款多进制奇偶校验检查器，基于纯前端技术实现，无任何依赖，不仅能满足日常开发和学习中的奇偶校验需求，也是前端新手练习的绝佳案例。

通过本案例，可熟练掌握以下知识点：

• 原生 JavaScript DOM 操作（获取元素、修改样式、绑定事件）
• 正则表达式的应用（数字格式校验）
• 进制转换相关 API（parseInt、toString）
• 函数封装与代码复用
• 用户交互体验优化（动态提示、错误反馈）