跳到主要内容多进制奇偶校验检查器(HTML+CSS+JS 纯前端实现) | 极客日志HTML / CSS大前端算法
多进制奇偶校验检查器(HTML+CSS+JS 纯前端实现)
一款基于纯前端技术(HTML+CSS+JavaScript)实现的多进制奇偶校验检查器。工具支持二进制、八进制、十进制及十六进制的切换与校验,具备智能前缀识别、双校验类型选择及输入验证功能。核心逻辑涵盖 DOM 操作、正则表达式验证、进制转换及奇偶性计算。无需后端依赖,适合前端新手练习基础知识点。
极客零度32 浏览 在数字通信、数据传输及嵌入式开发中,奇偶校验是一种简单高效的差错检测方法,通过判断二进制数据中'1'的个数为奇数或偶数,快速校验数据是否存在传输错误。日常开发中,我们常需要对不同进制(二进制、八进制、十进制、十六进制)的数字进行奇偶校验,手动计算繁琐且易出错。
本文分享一款纯前端实现的「多进制奇偶校验检查器」,支持 4 种常用进制切换、自动识别进制前缀(如 0x、0o、0b)、偶校验/奇校验可选,无需后端依赖,打开浏览器即可使用。同时拆解核心代码逻辑,适合前端新手练习 DOM 操作、正则验证及进制转换相关知识点。
工具核心功能介绍
这款多进制奇偶校验检查器聚焦'便捷、精准、易用',核心功能如下,覆盖日常开发中的奇偶校验场景:
- 多进制支持:兼容二进制(2)、八进制(8)、十进制(10)、十六进制(16),可自由切换
- 智能前缀识别:自动识别十六进制(0x)、八进制(0o)、二进制(0b)前缀,无需手动去除
- 双校验类型:支持偶校验(1 的个数为偶数)、奇校验(1 的个数为奇数),可自由选择
- 友好交互体验:输入提示动态切换、回车键触发校验、错误提示清晰、转换详情可视化
- 输入验证:自动校验输入格式合法性,避免无效数字导致的程序异常
操作流程简单——选择进制→输入数字→选择校验类型→执行校验,即可快速得到校验结果及完整转换详情。
开发环境与技术栈
本工具采用纯前端技术栈,无任何第三方框架或依赖,新手可直接上手,无需额外配置:
- 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>
多进制奇偶校验检查器
选择数字进制:
二进制 (2)
八进制 (8)
十进制 (10)
十六进制 (16)
请输入数字:
选择校验类型:
偶校验
奇校验
执行校验
</style>
</head>
<body>
<div class="container">
<h1>
</h1>
<div class="input-group">
<label for="baseSelect">
</label>
<select id="baseSelect" onchange="updatePlaceholder()">
<option value="2">
</option>
<option value="8">
</option>
<option value="10" selected>
</option>
<option value="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>
</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 提示,引导用户输入正确格式的数字,降低使用成本:
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;
}
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]+$/;
break;
case 8:
validPattern = /^[0-7]+$/;
break;
case 10:
validPattern = /^[0-9]+$/;
break;
case 16:
validPattern = /^[0-9A-Fa-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);
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 个辅助函数,用于优化代码复用性和用户体验:
- 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)
- 函数封装与代码复用
- 用户交互体验优化(动态提示、错误反馈)
相关免费在线工具
- 加密/解密文本
使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online
- Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印,支持批量处理与下载。 在线工具,Gemini 图片去水印在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
- Markdown转HTML
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
- HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online