HTML / CSS大前端算法
多进制奇偶校验检查器：HTML+CSS+JS 纯前端实现
一款基于纯前端技术实现的多进制奇偶校验检查器。该工具支持二进制、八进制、十进制及十六进制的切换与校验，具备智能前缀识别、输入格式验证及双校验类型选择功能。通过原生 JavaScript 实现核心逻辑，无需后端依赖，适用于日常开发中的差错检测场景及前端初学者练习 DOM 操作、正则表达式与进制转换知识。
一款基于纯前端技术实现的多进制奇偶校验检查器。该工具支持二进制、八进制、十进制及十六进制的切换与校验，具备智能前缀识别、输入格式验证及双校验类型选择功能。通过原生 JavaScript 实现核心逻辑，无需后端依赖，适用于日常开发中的差错检测场景及前端初学者练习 DOM 操作、正则表达式与进制转换知识。
在数字通信、数据传输及嵌入式开发中，奇偶校验是一种简单高效的差错检测方法，通过判断二进制数据中'1'的个数为奇数或偶数，快速校验数据是否存在传输错误。日常开发中，我们常需要对不同进制（二进制、八进制、十进制、十六进制）的数字进行奇偶校验，手动计算繁琐且易出错。
本文介绍一款纯前端实现的「多进制奇偶校验检查器」，支持 4 种常用进制切换、自动识别进制前缀（如 0x、0o、0b）、偶校验/奇校验可选，无需后端依赖，打开浏览器即可使用。同时拆解核心代码逻辑，适合前端新手练习 DOM 操作、正则验证及进制转换相关知识点。
这款多进制奇偶校验检查器聚焦'便捷、精准、易用'，核心功能如下，覆盖日常开发中的奇偶校验场景：
工具界面简洁清爽，适配 PC 端，操作流程简单——选择进制→输入数字→选择校验类型→执行校验，即可快速得到校验结果及完整转换详情。
本工具采用纯前端技术栈，无任何第三方框架或依赖，新手可直接上手，无需额外配置：
页面整体采用'容器 + 功能模块'的结构，布局清晰，逻辑连贯，每个功能模块独立封装，便于后续维护和扩展。核心结构分为 5 个部分：
关键细节：结果区和详情区默认隐藏，执行校验后根据结果动态显示，错误提示与正常结果区分样式，提升用户体验；支持回车键触发校验，符合用户操作习惯。
<!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>
样式设计遵循'简洁、清晰、易用'的原则，重点优化交互体验和视觉区分，核心样式如下：
设置全局字体、背景色，容器居中显示，添加阴影和圆角提升层次感，确保页面整洁美观：
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);
}
统一输入框、选择框、单选按钮的样式，设置间距和 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;
}
按钮设置全屏宽度，添加 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;
: ;
: ;
}
核心逻辑分为 5 个模块，均采用原生 JavaScript 实现，函数独立封装，便于维护和扩展，同时添加输入校验和错误处理，提升工具稳定性和用户体验。
根据选择的进制，动态修改输入框的 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}进制数字`;
}
}
这是工具的核心函数，负责获取用户输入、验证输入合法性、进制转换、奇偶校验，最终展示结果和转换详情，步骤如下：
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.);
}
}
包含 2 个辅助函数，用于优化代码复用性和用户体验：
// 获取进制名称
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';
}
添加页面加载初始化、回车键触发校验，提升用户体验：
// 页面加载时初始化输入提示
window.onload = function(){
updatePlaceholder();
};
// 回车键触发校验
document.getElementById('numberInput').addEventListener('keypress', function(event){
if(event.key === 'Enter') {
performParityCheck();
}
});
工具操作简单，无需复杂配置，步骤如下：
注意：输入数字时需符合对应进制的规则（如二进制仅输入 0 和 1，十六进制可输入 0-9、A-F、a-f），工具会自动校验格式，若输入错误会给出明确提示。
本工具已实现核心功能，可根据实际需求进一步扩展，推荐以下优化方向，适合进阶练习：
这款多进制奇偶校验检查器，基于纯前端技术实现，无任何依赖，不仅能满足日常开发和学习中的奇偶校验需求，也是前端新手练习的绝佳案例。
通过本案例，可熟练掌握以下知识点：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online