【前端实战】多进制奇偶校验检查器（HTML+CSS+JS）完整实现，附源码

Ne0inhk

— 13 min read
【前端实战】多进制奇偶校验检查器（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个部分：

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

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>多进制奇偶校验检查器</title><style>/* 后续CSS代码 */</style></head><body><divclass="container"><h1>多进制奇偶校验检查器</h1><!-- 进制选择 --><divclass="input-group"><labelfor="baseSelect">选择数字进制：</label><selectid="baseSelect"onchange="updatePlaceholder()"><optionvalue="2">二进制 (2)</option><optionvalue="8">八进制 (8)</option><optionvalue="10"selected>十进制 (10)</option><optionvalue="16">十六进制 (16)</option></select></div><!-- 数字输入 --><divclass="input-group"><labelfor="numberInput">请输入数字：</label><inputtype="text"id="numberInput"placeholder="请输入十进制数字，例如: 25"></div><!-- 校验类型选择 --><divclass="input-group"><label>选择校验类型：</label><divclass="radio-group"><divclass="radio-item"><inputtype="radio"id="evenCheck"name="parityType"value="even"checked><labelfor="evenCheck">偶校验</label></div><divclass="radio-item"><inputtype="radio"id="oddCheck"name="parityType"value="odd"><labelfor="oddCheck">奇校验</label></div></div></div><!-- 操作按钮 --><buttononclick="performParityCheck()">执行校验</button><!-- 结果与详情显示 --><divid="result"class="result"style="display:none;"></div><divid="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;margin-top: 10px;font-size: 14px;}

五、核心功能实现（JavaScript）

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

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

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

functionupdatePlaceholder(){const base =parseInt(document.getElementById('baseSelect').value);const numberInput = document.getElementById('numberInput');switch(base){case2: numberInput.placeholder ="请输入二进制数字，例如: 10101";break;case8: numberInput.placeholder ="请输入八进制数字，例如: 77 (或 0o77)";break;case10: numberInput.placeholder ="请输入十进制数字，例如: 25";break;case16: numberInput.placeholder ="请输入十六进制数字，例如: A5 (或 0xA5)";break;default: numberInput.placeholder =`请输入${base}进制数字`;}}

5.2 核心校验逻辑（performParityCheck）

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

  1. 获取用户输入（数字、进制、校验类型），隐藏之前的结果和详情
  2. 输入合法性校验（非空校验）
  3. 识别进制前缀（0x、0o、0b），处理输入文本，确定实际进制
  4. 通过正则表达式验证数字格式是否符合当前进制要求
  5. 将输入数字转换为十进制，再转换为二进制（奇偶校验基于二进制中1的个数）
  6. 计算二进制中1的个数，根据校验类型判断是否通过校验
  7. 显示转换详情和校验结果，根据结果设置对应样式
functionperformParityCheck(){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);}elseif(cleanNumberStr.toLowerCase().startsWith('0o')){ detectedBase =8; cleanNumberStr = cleanNumberStr.substring(2);}elseif(cleanNumberStr.toLowerCase().startsWith('0b')){ detectedBase =2; cleanNumberStr = cleanNumberStr.substring(2);}// 验证数字格式是否符合当前进制let validPattern;switch(detectedBase){case2: validPattern =/^[01]+$/;// 二进制仅允许0和1break;case8: validPattern =/^[0-7]+$/;// 八进制允许0-7break;case10: validPattern =/^[0-9]+$/;// 十进制允许0-9break;case16: validPattern =/^[0-9A-Fa-f]+$/;// 十六进制允许0-9、A-F、a-fbreak;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：统一处理错误提示，隐藏详情区，设置错误样式，提升代码复用性
// 获取进制名称functiongetBaseName(base){switch(base){case2:return'二进制';case8:return'八进制';case10:return'十进制';case16:return'十六进制';default:return base +'进制';}}// 显示错误提示functionshowError(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）
  • 函数封装与代码复用
  • 用户交互体验优化（动态提示、错误反馈）

完整代码已上传至绑定资源，或者关注留言获取。若有更好的优化建议或功能扩展想法，欢迎在评论区交流讨论！需要的朋友可以点赞收藏，方便后续查阅和使用

Read more

DeepFace深度学习库+OpenCV实现——情绪分析器

DeepFace深度学习库+OpenCV实现——情绪分析器

目录 应用场景 实现组件 1. 硬件组件 2. 软件库与依赖 3. 功能模块 代码详解（实现思路） 导入必要的库 打开摄像头并初始化变量 主循环 FPS计算 情绪分析及结果展示 显示FPS和图像 退出条件 编辑 完整代码 效果展示 自然的 开心的 伤心的 恐惧的 惊讶的  效果展示 自然的 开心的 伤心的 恐惧的 惊讶的   应用场景         应用场景比较广泛，尤其是在需要了解和分析人类情感反应的场合。： 1. 心理健康评估：在心理健康领域，可以通过长期监控和分析一个人的情绪变化来辅助医生进行诊断或治疗效果评估。 2. 用户体验研究：在产品设计、广告制作或网站开发过程中，通过观察用户在使用过程中的情绪反应，来优化产品的用户体验。 3. 互动娱乐：在游戏或虚拟现实应用中，根据玩家的情绪状态动态调整游戏难度或故事情节，以增加沉浸感和互动性。

By Ne0inhk
最全java面试题及答案（208道）

最全java面试题及答案（208道）

本文分为十九个模块，分别是：「Java 基础、容器、多线程、反射、对象拷贝、Java Web 、异常、网络、设计模式、Spring/Spring MVC、Spring Boot/Spring Cloud、Hibernate、MyBatis、RabbitMQ、Kafka、Zookeeper、MySQL、Redis、JVM」 ，如下图所示： 共包含 208 道面试题，本文的宗旨是为读者朋友们整理一份详实而又权威的面试清单，下面一起进入主题吧。 Java 基础 1. JDK 和 JRE 有什么区别？ * JDK：Java Development Kit 的简称，Java 开发工具包，提供了 Java

By Ne0inhk
10分钟打造专属AI助手！ToDesk云电脑/顺网云/海马云操作DeepSeek哪家强？

10分钟打造专属AI助手！ToDesk云电脑/顺网云/海马云操作DeepSeek哪家强？

文章目录 * 一、引言 * 云计算平台概览 * ToDesk云电脑：随时随地用上高性能电脑 * 二 .云电脑初体验 * DeekSeek介绍 * 版本参数与特点 * 任务类型表现 * 1、ToDesk云电脑 * 2、顺网云电脑 * 3、海马云电脑 * 三、DeekSeek本地化实操和AIGC应用 * 1. ToDesk云电脑 * 2. 海马云电脑 * 3、顺网云电脑 * 四、结语 * 总结：云电脑如何选择？ 一、引言 DeepSeek这些大模型让 AI 开发变得越来越有趣，但真要跑起来，可没那么简单！ * 本地配置太麻烦：显卡不够、驱动难装、环境冲突，光是折腾这些就让人心态崩了。 * 云端性能参差不齐：选错云电脑，可能卡到爆、加载慢，还容易掉线，搞得效率直线下降。 * 成本难控：有的平台按小时计费，价格一会儿一个样，

By Ne0inhk
用 DeepSeek 打造你的超强代码助手

用 DeepSeek 打造你的超强代码助手

DeepSeek Engineer 是啥？ 简单来说，DeepSeek Engineer 是一个基于命令行的智能助手。它能帮你完成这些事： * 快速读文件内容：比如你有个配置文件，直接用命令把它加载进助手，后续所有操作都可以基于这个文件。 * 自动改文件：它不仅能提建议，还可以直接生成差异表（diff），甚至自动应用修改。 * 智能代码生成：比如你让它生成代码片段，它会按照指定格式和规则直接返回。 更重要的是，这一切都是通过 DeepSeek 的强大 API 来实现的。想象一下，你有个贴身助手，不仅能听懂你的代码需求，还能直接动手帮你写！ 核心功能拆解 我们先来看 DeepSeek Engineer 的几个核心能力，让你更好地理解它的强大之处。 1. 自动配置 DeepSeek 客户端 启动这个工具时，你只需要准备一个 .env 文件，里面写上你的 API Key，比如： DEEPSEEK_API_

By Ne0inhk