多进制奇偶校验检查器（HTML+CSS+JS 实现）

在数字通信、数据传输及嵌入式开发中，奇偶校验是一种简单高效的差错检测方法，通过判断二进制数据中'1'的个数为奇数或偶数，快速校验数据是否存在传输错误。日常开发中，我们常需要对不同进制（二进制、八进制、十进制、十六进制）的数字进行奇偶校验，手动计算繁琐且易出错。

本工具支持 4 种常用进制切换、自动识别进制前缀（如 0x、0o、0b）、偶校验/奇校验可选，无需后端依赖，打开浏览器即可使用。同时拆解核心代码逻辑，适合前端新手练习 DOM 操作、正则验证及进制转换相关知识点。

一、工具核心功能介绍

这款多进制奇偶校验检查器聚焦'便捷、精准、易用'，核心功能如下，覆盖日常开发中的奇偶校验场景：

多进制支持：兼容二进制（2）、八进制（8）、十进制（10）、十六进制（16），可自由切换
智能前缀识别：自动识别十六进制（0x）、八进制（0o）、二进制（0b）前缀，无需手动去除
双校验类型：支持偶校验（1 的个数为偶数）、奇校验（1 的个数为奇数），可自由选择
友好交互体验：输入提示动态切换、回车键触发校验、错误提示清晰、转换详情可视化
输入验证：自动校验输入格式合法性，避免无效数字导致的程序异常

工具预览：界面简洁清爽，适配 PC 端，操作流程简单——选择进制→输入数字→选择校验类型→执行校验，即可快速得到校验结果及完整转换详情。

二、开发环境与技术栈

本工具采用纯前端技术栈，无任何第三方框架或依赖，新手可直接上手，无需额外配置：

HTML5：搭建页面结构，采用语义化标签，清晰划分功能模块（输入区、选择区、结果区）
CSS3：实现页面美化与布局，添加阴影、圆角提升视觉体验，保证界面简洁易用
原生 JavaScript：实现核心逻辑（进制切换、输入验证、进制转换、奇偶校验、交互反馈）
浏览器支持：兼容 Chrome、Edge、Firefox 等主流现代浏览器，无需安装额外插件

三、页面结构设计（HTML）

页面整体采用'容器 + 功能模块'的结构，布局清晰，逻辑连贯，每个功能模块独立封装，便于后续维护和扩展。核心结构分为 5 个部分：

标题区：展示工具名称，居中显示，提升辨识度
进制选择区：下拉选择框，支持 4 种常用进制切换，切换时动态更新输入提示
数字输入区：文本输入框，根据选择的进制动态显示对应的输入提示
校验类型选择区：单选按钮，支持偶校验、奇校验切换，默认选中偶校验
操作与结果区：执行校验按钮、校验结果显示区、转换详情显示区

关键细节：结果区和详情区默认隐藏，执行校验后根据结果动态显示，错误提示与正常结果区分样式，提升用户体验；支持回车键触发校验，符合用户操作习惯。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多进制奇偶校验检查器</title>
    <style>
        /* 后续 CSS 代码 */
    </style>
</head>
<body>
    <div class="container">
        <h1>多进制奇偶校验检查器</h1>
        <!-- 进制选择 -->
        <div class="input-group">
            <label for="baseSelect">选择数字进制：</label>
            <select id="baseSelect" onchange="updatePlaceholder()">
                <option value="2">二进制 (2)</option>
                <option value="8">八进制 (8)</option>
                <option value="10" selected>十进制 (10)</option>
                <option value="16">十六进制 (16)</option>
            </select>
        </div>
        <!-- 数字输入 -->
        <div class="input-group">
            <label for="numberInput">请输入数字：</label>
            <input type="text" id="numberInput" placeholder="请输入十进制数字，例如：25">
        </div>
        <!-- 校验类型选择 -->
        <div class="input-group">
            <label>选择校验类型：</label>
            <div class="radio-group">
                <div class="radio-item">
                    <input type="radio" id="evenCheck" name="parityType" value="even" checked>
                    <label for="evenCheck">偶校验</label>
                </div>
                <div class="radio-item">
                    <input type="radio" id="oddCheck" name="parityType" value="odd">
                    <label for="oddCheck">奇校验</label>
                </div>
            </div>
        </div>
        <!-- 操作按钮 -->
        <button onclick="performParityCheck()">执行校验</button>
        <!-- 结果与详情显示 -->
        <div id="result" class="result" style="display:none;"></div>
        <div id="info" class="info" style="display:none;"></div>
    </div>
    <script>
        /* 后续 JS 代码 */
    </script>
</body>
</html>

四、样式美化（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;
    : ;
    : ;
}

五、核心功能实现（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）

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

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

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);
    }   (cleanNumberStr.().()) {
        detectedBase = ;
        cleanNumberStr = cleanNumberStr.();
    }   (cleanNumberStr.().()) {
        detectedBase = ;
        cleanNumberStr = cleanNumberStr.();
    }

    
     validPattern;
    (detectedBase) {
         :
            validPattern = ; 
            ;
         :
            validPattern = ; 
            ;
         :
            validPattern = ; 
            ;
         :
            validPattern = ; 
            ;
        :
            validPattern = ;
    }
     (!validPattern.(cleanNumberStr)) {
        ();
        ;
    }

     {
        
         decimalValue = (cleanNumberStr, detectedBase);
         ((decimalValue)) {
            ();
            ;
        }

        
         binaryStr = decimalValue.();

        
         onesCount = ;
         ( i = ; i < binaryStr.; i++) {
             (binaryStr[i] === ) {
                onesCount++;
            }
        }

        
         isValid = ;
         resultText = ;
         (parityType === ) {
            isValid = (onesCount %  === );
            resultText = ;
        }  { 
            isValid = (onesCount %  === );
            resultText = ;
        }

        
        infoDiv. = ;
        infoDiv.. = ;

        
        resultDiv. = resultText;
        resultDiv. = ;
         (isValid) {
            resultDiv..(parityType ===  ?  : );
        }  {
            resultDiv..();
        }
        resultDiv.. = ;
    }  (e) {
        ( + e.);
    }
}

5.3 辅助函数

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

getBaseName：根据进制数值，返回对应的进制名称（如 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();
    }
});

六、工具使用说明

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

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

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

七、功能扩展与优化建议

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

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

八、总结

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

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

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

多进制奇偶校验检查器（HTML+CSS+JS 实现）

一、工具核心功能介绍

二、开发环境与技术栈

三、页面结构设计（HTML）

四、样式美化（CSS）

4.1 全局样式与容器布局

4.2 输入与选择区样式

4.3 按钮与结果区样式

五、核心功能实现（JavaScript）

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

5.2 核心校验逻辑（performParityCheck）

5.3 辅助函数

5.4 初始化与交互优化

六、工具使用说明

七、功能扩展与优化建议

八、总结

更多推荐文章

相关免费在线工具

多进制奇偶校验检查器（HTML+CSS+JS 实现）

一、工具核心功能介绍

二、开发环境与技术栈

三、页面结构设计（HTML）

四、样式美化（CSS）

4.1 全局样式与容器布局

4.2 输入与选择区样式

4.3 按钮与结果区样式

五、核心功能实现（JavaScript）

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

5.2 核心校验逻辑（performParityCheck）

5.3 辅助函数

5.4 初始化与交互优化

六、工具使用说明

七、功能扩展与优化建议

八、总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具