在日常开发、计算机学习以及底层调试场景中，不同进制之间的数值转换是一项高频且基础的需求。无论是嵌入式工程师处理寄存器数据，还是前端开发者解析颜色代码与权限掩码，都需要在二进制、八进制、十进制和十六进制之间快速切换。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现一个进制转换工具。效果演示
用户进入页面后，首先会在顶部看到一个清晰的文本输入框，用于录入待转换的数值。紧随其后的是两个并排的下拉选择器，分别代表“源进制”和“目标进制”，默认状态下分别为十进制和十六进制。当用户在输入框中键入数字并点击“转换”按钮，或者直接按下回车键时，系统会立即对输入内容进行合法性校验。如果输入的字符不符合当前选定的进制规范，输入框下方会即时显示红色的错误提示，且结果区域保持空白。一旦校验通过，下方的结果卡片中会瞬间呈现出转换后的数值，且十六进制结果会自动转换为大写字母显示，确保视觉上的统一与专业。
页面结构
输入区域
输入区域是用户交互的起点，包含一个标签、一个文本输入框以及一个隐藏的错误提示层。<div class="input-group"> <label for="inputValue">输入数值</label> <input type="text" id="inputValue" placeholder="请输入要转换的数值"> <div class="error" id="errorMsg">输入的数值不符合当前进制规范</div></div>
控制区域
控制区域由两个并排的下拉菜单组成，分别用于选择源进制和目标进制。<div class="row"> <div class="col"> <div class="input-group"> <label for="fromBase">源进制</label> <select id="fromBase"> <option value="2">二进制</option> <option value="8">八进制</option> <option value="10" selected>十进制</option> <option value="16">十六进制</option> </select> </div> </div> <div class="col"> <div class="input-group"> <label for="toBase">目标进制</label> <select id="toBase"> <option value="2">二进制</option> <option value="8">八进制</option> <option value="10">十进制</option> <option value="16" selected>十六进制</option> </select> </div> </div></div>
结果展示区域
结果区域位于页面底部，通过一条灰色的分割线与上方功能区隔开。<div class="result-group"> <div class="result-item"> <div class="result-label">转换结果</div> <div class="result-value" id="resultValue">-</div> </div></div>
核心功能实现
本工具的核心逻辑集中在数值的合法性校验与进制间的数学转换。为了确保用户体验的流畅性，我们采用了原生 JavaScript 监听多种交互事件，并利用正则表达式（Regular Expression）进行高效的模式匹配。
输入合法性校验机制
在处理任何转换逻辑之前，首要任务是确保用户输入的数据在当前选定的进制下是合法的。不同的进制系统拥有特定的字符集：二进制仅允许 0 和 1；八进制允许 0-7；十进制允许 0-9；而十六进制则额外包含了 a-f（或 A-F）。为了实现这一逻辑，我们定义了一个名为 validateInput 的工具函数。该函数接收当前的输入值 value 和源进制 base 作为参数。内部实现上，我们构建了一个映射对象 validChars，其键名为进制数，键值为对应的正则表达式。通过调用正则的 .test() 方法，我们可以快速返回布尔值来判断输入是否合规。function validateInput(value, base) { if (!value || value.trim() === '') { return false; } const validChars = { 2: /^[01]+$/, 8: /^[0-7]+$/, 10: /^[0-9]+$/, 16: /^[0-9a-fA-F]+$/ }; return validChars[base].test(value.trim());}
进制转换的核心算法
JavaScript 语言本身提供了非常强大的内置方法来完成进制转换，这使得我们无需手动编写复杂的逻辑。整个转换过程分为两步：首先将任意进制的字符串转换为十进制整数，然后再将该十进制整数转换为目标进制的字符串。在 convert 函数中，我们首先获取输入框的值以及两个下拉菜单选中的进制值。利用 parseInt(value, from) 方法，可以将指定进制的字符串解析为十进制的 Number 类型。如果解析失败（例如输入了非法字符），该方法会返回 NaN。接着，我们调用十进制数值的 .toString(to) 方法，将其转换为目标进制的字符串表示形式。值得注意的是，十六进制的结果通常习惯使用大写字母（如 FF 而非 ff），因此我们在最后链式调用了 .toUpperCase() 方法进行格式化。function convert() { const value = inputValue.value.trim(); const from = parseInt(fromBase.value); const to = parseInt(toBase.value);
if (!validateInput(value, from)) { errorMsg.classList.add('show'); resultValue.textContent = '-'; return; }
errorMsg.classList.remove('show');
const decimalValue = parseInt(value, from);
if (isNaN(decimalValue)) { errorMsg.classList.add('show'); resultValue.textContent = '-'; return; }
resultValue.textContent = decimalValue.toString(to).toUpperCase();}
交互事件的自动化处理
为了提升工具的易用性，我们不能仅依赖用户点击“转换”按钮。在现代 Web 交互设计中，实时的反馈至关重要。这里我们为多个 DOM 元素绑定了事件监听器，以实现自动触发转换的功能。首先是输入框的 keypress 事件，当检测到用户按下回车键（Enter）时，直接调用 convert() 函数。其次，针对两个下拉选择器 fromBase 和 toBase，我们监听了它们的 change 事件。这意味着当用户改变了进制的设定，只要输入框内存在有效内容，程序就会立即根据新的进制规则重新执行转换逻辑。convertBtn.addEventListener('click', convert);
inputValue.addEventListener('keypress', function(e) { if (e.key === 'Enter') { convert(); }});
fromBase.addEventListener('change', function() { if (inputValue.value.trim()) { convert(); }});
toBase.addEventListener('change', function() { if (inputValue.value.trim()) { convert(); }});
源码地址
阅读原文：https://mp.weixin.qq.com/s/-QEX0FF4pEJD5de6IQ1cjg
该文章在 2026/4/9 17:07:40 编辑过
400 186 1886
