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

优质文章学习记录

— 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

要成为AI的主人，而不是被它所绑架

要成为AI的主人，而不是被它所绑架

这两年，AI 编码工具确实给开发效率带来了很大提升。写脚本更快了，补测试更轻松了，搭原型更顺手了，连很多文档工作都被大幅压缩。笔者自己在持续使用 GPT-5.4 和 Claude 一段时间后，也真切感受到了这种效率红利。与此同时，随着使用越来越深入，笔者也开始经常在架构师论坛和技术社区里，围绕 AI 开发的安全性、保密性、稳定性、可控性等问题，与多位大厂架构师持续交流。讨论得越多、实践得越久，我越认同一个判断：小项目、低敏项目、单人维护项目，AI 基本没有大问题；但一旦进入多人协作、长期演进、涉及核心资产和生产责任的项目，AI 如果没有边界、规范和审计，就很容易从“效率工具”变成“失控放大器”。 很多人讨论 AI，还停留在“能不能更快把功能做出来”这个层面。但架构师的关注点从来不只是“能不能开发出来”，而是“

一文读懂 OpenClaw：从童年经典的开源重生，到现象级 AI

如果你最近逛开源社区、游戏论坛或是 AI 技术圈，大概率会反复看到「OpenClaw」这个名字。但很多人不知道的是，如今开源圈有两个完全不同、却都堪称顶流的项目共用了这个名字：一个是让 27 年前经典横版游戏重获新生的开源引擎，另一个是创下 GitHub 增长纪录的现象级自托管 AI Agent 框架。 本文会完整拆解两个 OpenClaw 的前世今生、核心价值与技术内核，帮你彻底分清它们，读懂它们爆火背后的底层逻辑。 一、游戏向 OpenClaw：让 27 年前的海盗猫传奇，在现代系统重生 对于 80、90 后的 PC 玩家来说，1997 年由 Monolith Productions 开发的《Captain Claw》（国内常译《利爪船长》《海盗猫》），是刻在盗版光盘时代里的童年白月光。 这款
普通人如何用 AI 提升效率？10 个日常场景的 AI 工具实用指南

普通人如何用 AI 提升效率？10 个日常场景的 AI 工具实用指南

我的资源里面有很多超优质的ai相关的资源下载，都是精心挑选的，大家可以去看看，免费的。 一、引言 1.1 AI 融入日常生活 在数字化浪潮中，AI 不再是科幻概念，已切实融入日常。从清晨智能语音助手唤醒，到夜间刷短视频时的个性化推荐，AI 影响着生活各环节。它改变人们获取信息、处理事务方式，为提升效率带来可能。 1.2 普通人使用 AI 的意义 对普通人而言，利用 AI 工具可节省时间、降低操作难度、挖掘自身潜力。在快节奏生活中，AI 辅助能让日常事务处理更轻松，将更多精力投入高价值活动，如学习新技能、陪伴家人等，实现生活与工作的平衡和优化。 二、办公场景 2.1 文档处理 2.1.1 语法检查与风格优化 Grammarly 是一款出色的写作辅助工具。

AI做PPT哪个最好用？——7款顶流工具深度横评

AI做PPT哪个最好用？——7款顶流工具深度横评 对于职场人士、零基础新人或任何需要“又快又好”做PPT的人，AI生成PPT工具已经从“锦上添花”升级为“必备效率神器”。本文一次性梳理7款市面呼声最高的产品，逐条拆解它们的公司背景、功能特色、免费额度、优缺点及适用人群。 1. SpeedAI(https://kuaipaper.com/ppt) 所属公司 国内AI办公赛道新锐团队，依托自研大模型深耕智能办公场景，核心成员来自头部互联网与办公软件厂商。 功能特色 * 全链路智能生成：输入主题/关键词→15秒输出逻辑闭环大纲→2分钟生成20+页完整PPT，大纲可根据行业、场景自动调整深度，适配商务汇报、学术答辩、校园宣讲等不同需求 * 多源无损导入：支持Word、PDF、XMind、Markdown、思维导图图片一键转PPT，复杂表格、公式保留率达95%以上，长文本自动提炼核心观点，避免逻辑断裂 * 在线精细化编辑：文字、