【前端实战】多进制奇偶校验检查器（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

Techub News 專訪高鋒集團合夥人、Web3Labs行政總裁黃俊瑯：以資本與生態，賦能傳統企業Web3轉型

本次專訪聚焦高鋒集團如何透過資本投入與生態資源，助力傳統企業邁向Web3轉型。從近期戰略參與上市公司德祥地產的配股出發，高鋒集團合夥人、Web3Labs CEO黃俊瑯（Caspar）分享了集團的戰略思考、核心優勢、執行機制，以及對傳統企業轉型痛點的觀察與未來願景。這場對話展現了高鋒集團與Web3Labs在「實物資產代幣化」（RWA）等領域的創新實踐，以及他們致力成為傳統企業數字化轉型可靠夥伴的定位。 戰略投資德祥地產：搭建Web3與傳統實體經濟的橋樑 Techub News：Caspar您好。我們注意到高鋒集團近期戰略性參與了上市公司德祥地產的配股。這在市場看來頗為創新，能否請您談談這次投資背後的戰略思考？ 黃俊瑯：這次對德祥地產的投資，對我們而言，遠超一次單純的財務投資。它是一個清晰的信號，也是我們戰略的關鍵落子。高鋒集團的核心使命之一，是搭建Web3前沿科技與傳統實體經濟之間的橋樑。德祥擁有紮實的房地產業務與實物資產，這正是探索「實物資產代幣化」（RWA）最具潛力的領域。我們這次參與，是協助其啟動轉型的第一步，未來將結合我們的專業生態，共同探索如何利用區塊鏈技術提升資產流
35道常见的前端vue面试题，零基础入门到精通，收藏这篇就够了

35道常见的前端vue面试题，零基础入门到精通，收藏这篇就够了

来源 | https://segmentfault.com/a/1190000021936876 今天这篇文章给大家分享一些常见的前端vue面试题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 对于前端来说，尽管css、html、js是主要的基础知识，但是随着技术的不断发展，出现了很多优秀的mv*框架以及小程序框架。因此，对于前端开发者而言，需要对一些前端框架进行熟练掌握。这篇文章我们一起来聊一聊VUE及全家桶的常见面试问题。 1、请讲述下VUE的MVVM的理解？ MVVM 是 Model-View-ViewModel的缩写，即将数据模型与数据表现层通过数据驱动进行分离，从而只需要关系数据模型的开发，而不需要考虑页面的表现，具体说来如下： Model代表数据模型：主要用于定义数据和操作的业务逻辑。 View代表页面展示组件（即dom展现形式）：负责将数据模型转化成UI 展现出来。 ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View
Java Web 编程训练系统系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】

Java Web 编程训练系统系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】

摘要 随着信息技术的快速发展，互联网应用逐渐渗透到各行各业，教育领域也迎来了数字化转型的浪潮。传统的编程训练方式通常依赖于本地开发环境或简单的在线评测系统，难以满足现代教育对灵活性、交互性和数据驱动的需求。尤其是在高校计算机专业教学中，学生编程能力的培养需要更加系统化、智能化的平台支持。基于此背景，设计并实现一个高效、易用的Java Web编程训练系统具有重要意义。该系统旨在为学生提供在线编程练习、自动评测、学习进度跟踪等功能，同时为教师提供题目管理、成绩分析等教学辅助工具。关键词：Java Web、编程训练、在线评测、教学辅助、SpringBoot2。 本系统采用前后端分离架构，后端基于SpringBoot2框架搭建，结合MyBatis-Plus实现高效数据操作，MySQL8.0作为数据库存储系统数据。前端采用Vue3框架，利用其响应式特性和组件化开发优势，提升用户体验。系统核心功能包括用户权限管理、编程题目发布与提交、自动代码评测、学习数据统计分析等。通过集成第三方代码运行环境，系统能够支持多种编程语言的在线编译与执行。此外，系统还提供详细的错误反馈和性能分析报告，帮助学生快速
低延迟直播终极方案：WebRTC + MediaMTX，延迟＜500ms！

低延迟直播终极方案：WebRTC + MediaMTX，延迟＜500ms！

低延迟直播终极方案：WebRTC + MediaMTX，延迟<500ms！ 在直播场景中，延迟往往是用户体验的关键。传统的HLS或RTMP直播延迟通常在3-10秒，这对于互动连麦、远程驾驶、在线教育等场景来说远远不够。那么有没有一种方案可以实现端到端延迟低于500ms，且无需安装插件，直接用浏览器就能观看？答案是肯定的，今天我们就来介绍一套强大的组合：WebRTC + MediaMTX。 为什么是WebRTC？ WebRTC（Web Real-Time Communication）是一种支持浏览器之间实时音视频通信的技术，其核心优势就是超低延迟（通常可达200-400ms）。它基于UDP传输，配合P2P或通过TURN中继，天然适合实时流媒体场景。 但WebRTC本身是一个点对点协议，如果我们要做一对多的直播，就需要一个媒体服务器来分发流。市面上有很多选择，如Janus、Licode、SRS等，而今天的主角MediaMTX（原名rtsp-simple-server）则因其轻量、易用、原生支持WebRTC输出而备受青睐。 MediaMTX 简介 MediaMTX 是一个开源